如何编译.scss文件，使用gulp

Question

任务

我正在尝试使用gulp将依赖于其他.scss文件的.scss文件编译为单个.css文件。

我在哪里

我目前正在使用的是一个类似于下面的通用目录的目录。在下面的目录中，global.scss文件导入file1.scss，file2.scss和file3.scss。

sass
  |
  |-file1.scss
  |-file2.scss
  |-file3.scss
  |-global.scss

我希望的是什么

我希望我编写的gulp-sass任务会看到导入并识别此global.scss文件具有的依赖关系并相应地编译所有内容。这是我写的gulp.task：

gulp.task('global-styling', function() {
      gulp.src('src/resources/sass/global.scss')
          .pipe(sass().on('error', sass.logError()))
          .pipe(gulp.dest('dist/css/global.css'));
});

我得到的错误

抛出此错误是因为global.scss所依赖的文件中的变量从未被编译过，甚至没有被注意到。

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: src/resources/sass/global.scss
Error: Undefined variable: "$light-font".
        on line 110 of src/resources/sass/global.scss
>>     color: $light-font;
   -----------^

我需要什么

如果你现在还没弄明白，我需要弄清楚如何编写一个gulp任务，它将在我的dist文件夹中从global.scss及其依赖项创建一个global.css文件。有人可以说清楚如何使用gulp完成这项工作。

Answer 1

如果您import global.scss中的所有内容，您不应该遇到任何问题。我发现您的sass.logError()中有错误，没有()，还有gulp.dest您需要传递文件夹路径：.pipe(gulp.dest('dist/css/'));，它会创建一个名为{{1}的文件在global.css内。这是一个有效的例子：

<强> gulpfile.js

dist/css

<强> SCSS / global.scss

const sass = require('gulp-sass');
const gulp = require('gulp');

gulp.task('global-styling', function() {
    gulp
        .src('./scss/base.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

<强> SCSS / var.scss

@import 'var';

body {
    background-color: $light-font;
}

输出 dist / css / global.css

$light-font: blue;

gulpfile.js编辑：gulp-rename

body {
  background-color: blue; }