在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通常不会生成输出文件。

Documentation

  

下划线让Sass知道该文件只是一个部分文件和   它不应该生成CSS文件。

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