Gulp SASS - 如何在不编译scss到css的情况下使用@import？

Question

我知道这可能是一个奇怪的问题，但请跟我走。 :)

是否可以使用gulp sass（或其他gulp插件）读取一个包含多个@import语句的单个.scss文件，并将所有这些@import文件导入/连接到一个未编译为CSS的单个.scss文件中？

背景信息：我已经将Bootstrap和FontAwesome的基础.scss文件合并成一个主.scss文件。现在我想将@import语句中的所有文件都放入单个.scss文件中。

我想到的另一个选项是只使用concat工具，但那么不是必须在gulp文件中手动指定要concat的每个文件吗？纠正我如果我错了。

以下是我要寻找的示例：

//base.scss
@import foo;
@import bar;

导入

//foo.scss
$my-font-size:20px;

And

//bar.scss
body {
  div {
    font-size:$my-font-size;
  }
}

为了让..

//final.scss
$my-font-size:20px;
body {
  div {
    font-size:$my-font-size;
  }
}

注意，@import被包含在final.scss文件中，但没有从SCSS编译到CSS。

- Anthony F.

Answer 1

我遇到了同样的问题。这个会帮助您。虽然有一些缺陷（忘记以下划线为前缀的文件名 - 这是我目前发现的）。 the npm package that is build especially for this purpose 免责声明：我不会解释npm如何工作，我假设作者知道什么是npm包，如果他想使用gulp插件。请不要因为我没有不必要地明确描述对于问问题的人来说显而易见的事情而删除我的答案。 为了防止删除这个答案缺乏上下文，我引用了包的描述。

import resolve
resolve @import statements in stylesheets

What this does
What if you have some less or stylus files that you want to smash together into a master file, without compiling to css? Just use import-resolve and all your dreams will come true. All @import statements will be resolved and you'll be left with one file containing all your precious mixins, variables and declarations.

Using import-resolve

npm install import-resolve
// some-node-thing.js 
var importResolve = require('import-resolve');

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({
    "ext": "less",
    "pathToMain": "path/to/main.less",
    "output": "path/to/output.less"
});

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({
    "ext": "styl",
    "pathToMain": "path/to/main.styl"
}, function (output) {
    fs.writeFile('foo.styl', output, function (){
        console.log('did it myself.');
    });
});

- entio

---

看起来很不错。由于我已经转到其他工作，暂时无法测试这个包，但它似乎确实做到了我需要的功能。我会将你的答案标记为解决方案。 - Anthony F.

谢谢。这对我来说是解决方案。同时，如果无法访问常规文件，则使用下划线前缀检查文件已创建拉取请求以进行修复。 - entio

是的，我看到了。开源的美妙之处。谢谢！ - Anthony F.

Answer 2

是的，你可以使用 gulp-scss 或者 gulp-ruby-sass 来实现这个功能。现在已经有很多这样的插件了，因为 Gulp 已经存在一段时间了。

gulp-sass 用来编译 sass 文件 https://www.npmjs.com/package/gulp-sass

gulp-rename 用来将文件重命名到发布目录 https://www.npmjs.com/package/gulp-rename

我目前正在使用 gulp-scss。你可以像下面这样简单地运行一个任务来满足你的需求。在下面的示例中，base.scss 是你的 scss 文件，其中包含所有的 @import 语句。

var gulp   = require('gulp'),
    scss   = require('gulp-scss'),
    rename = require('gulp-rename');

gulp.task('sass', function () {
  gulp.src('base.scss')
    .pipe(scss())
    .pipe(rename('final.scss'))
    .pipe(gulp.dest('assets/css/'));
});

更新：

假设您已经创建了包含导入语句的base.scss。上述方法应该可以工作。我们只需在提供的文件上运行scss任务，将其重命名并移动到您的目标目录即可。

更新2

保留变量需要使用concat方法，因为所有sass插件都是用于将sass编译为css。您不需要指定所有文件，只需要先指定变量，然后可以运行全局匹配自定义sass。只需确保遵循下面数组中的类似文件夹结构，以正确分离和组织资产。

您也不需要担心维护导入文件。这种方法不需要它，并且使用此方法时需要管理的内容更少。

var gulp   = require('gulp'),
    concat = require('gulp-concat');

var sassConcat = [
  'sass/variables.scss',
  'sass/modules/**/*.scss'
];

gulp.task('sass', function () {
  gulp.src(sassConcat)
  .pipe(concat('final.scss'))
  .pipe(gulp.dest('../assets/sass/'));
};

- Miura-shi

---

抱歉，这并没有达到我所期望的效果。它没有导入标记为 @import 的文件。我将强调上面问题的关键部分，以使其更加显眼。 - Anthony F.

奇怪。如果你将src设置为包含导入的base.scss，它将编译成一个文件并输出到任何你想要的目录中。这是我在我的构建系统中使用的方法。 - Miura-shi

@AnthonyF. 你是想从一个包含导入的文件中创建另一个导入文件吗？ - Miura-shi

是的，对我来说还是不起作用。我复制了你的任务，只更改了源文件的名称并将final.scss更改为'final.scss'以使其正常工作。它只需要base.scss中的内容并将其放入final.scss中。我觉得你可能不小心漏掉了一步或者其他什么，因为在你的任务中实际上没有进行Sass处理？它只需要一个源，重命名它，然后将其放在目标位置。 - Anthony F.

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Miura-shi