在 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

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

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

在 Gulp 中单独编译 SCSS 文件

Individually Compiling SCSS Files in Gulp

css

sass

gulp

gulp-sass