在 Gulp 中单独编译 SCSS 文件

Question

我有一个由组件组织的 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 任务，该任务将单独编译和输出目录中的每个文件，而不是最后将它们组合成一个文件？

提前致谢。

Answer 1

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

文档

下划线让 Sass 知道该文件只是部分文件，不应将其生成为 CSS 文件。

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