在 Gulp 中单独编译 SCSS 文件答案

【问题标题】：Individually Compiling SCSS Files in Gulp在 Gulp 中单独编译 SCSS 文件
【发布时间】：2017-11-03 02:00:06
【问题描述】：

我有一个按组件组织的 SCSS 部分列表，我尝试使用 Gulp 单独编译这些组件，但不知道该怎么做。

这是我要编译的部分文件列表：

_header.scss
_button.scss
_navigation.scss

我想将这些文件输出到与

相同的目录中

header.css
button.css
navigation.css

我正在使用gulp-sass 将我的所有 SCSS 文件编译成一个文件，如下所示：

gulp.task('styles', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src('./src/stylesheets/**/*.scss')
    // Run Sass on those files
    .pipe(sass({
      style: 'expanded',
    }).on('error', sass.logError))
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest('build/stylesheets'))
});

有没有办法创建一个单独的 Gulp 任务来单独编译和输出目录中的每个文件，而不是最后将它们组合成一个文件？

提前致谢。

【问题讨论】：

标签： css sass gulp gulp-sass

【解决方案1】：

您需要重命名部分文件删除前导下划线。如果文件名以 _xxx.scss 开头，Sass 通常不会生成输出文件。

Documentation

下划线让 Sass 知道该文件只是部分文件，并且它不应该被生成到 CSS 文件中。

您可以将文件重命名为 xxx.scss 并仍然导入到其他文件，如部分文件。

【讨论】：