如何使用Gulp编译将其他.scss导入一个主CSS文件的.scss文件

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任务，该任务将从global.scss及其依赖项在我的dist文件夹中创建一个global.css文件。 有人可以说明一下使用gulp是如何完成的。

Answer 1

如果import所有内容import global.scss ，则应该没有任何问题。 我在您的sass.logError()看到一个错误，它没有() ，对于gulp.dest也需要传递一个文件夹路径： .pipe(gulp.dest('dist/css/')); 它将在dist/css内创建一个名为global.css的文件。 这是一个工作示例：

gulpfile.js

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 / global.scss

@import 'var';

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

scss / var.scss

$light-font: blue;

在dist / css / global.css中输出

body {
  background-color: blue; } 

gulpfile.js编辑：用gulp重命名

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

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