Javascript 如何编译一个.scss文件，使用gulp将其他.scss导入一个主css文件 任务

我正在尝试使用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实现这一点。

如果您在global.scss中导入所有内容，您应该不会有任何问题。我在你的sass.logError中看到一个错误，它没有，而且到gulp.dest你需要传递一个文件夹路径：.pipegulp.dest'dist/css/；它将在dist/css中创建一个名为global.css的文件。以下是一个工作示例：

gulpfile.js

scss/global.scss

scss/var.scss

在dist/css/global.css中输出

gulpfile.js编辑：使用gulp重命名

---

太棒了，我要试试这个。现在，如果我想命名在dist中创建的.css文件，我将如何命名？您可以使用名为Happy to help的npm模块，欢迎使用Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。

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'));
});

@import 'var';

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

$light-font: blue;

body {
  background-color: blue; } 

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'));
});