gulp-sass 从 s10=] 到 css 的文件转换时抛出错误

Question

我正在尝试将多个 scss 文件转换为单个 css file。 main.scss 文件也使用 variable.scss 文件导入多个文件。当我转换为 css 文件时出现错误：

[09:46:00] Using gulpfile ~2333\Projects\AOS.Core\UI\assets\gulpfile.js
[09:46:00] Starting 'styles'...
[09:46:00] Finished 'styles' after 25 ms
Error in plugin "sass"
Message:
    styles\form.scss
Error: Undefined variable: "$color-red".
        on line 53 of styles/form.scss
>>     color: $color-red;
   -----------^

如何解决这个问题？

这是我的 gulp 任务：

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

gulp.task('styles', async function () {
    gulp.src('styles/*.scss')
        .pipe(sass().on('error', sass.logError))
         .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(gulp.dest('./css/'));
});

我的main.scss文件：

@import "variables.scss";
@import "global.scss";
@import "fonts.scss";

//resets;-
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: $font-regular, sans-serif;
  font-size: 0.625rem;
  color: $text-primary;
  background: $color-white;
}

Answer 1

简而言之：

Partials 的文件名应以下划线开头。

将分音重命名为 _variables.scss、_global.scss、_fonts.scss 并将 main.scss 更新为：

@import "variables";
@import "global";
@import "fonts";

完整解释：

构建失败，因为 sass 正在尝试将 form.scss 编译为 form.css，但找不到对 $color-red.

的引用

来自Sass-Lang.com:

As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

https://sass-lang.com/documentation/at-rules/import#partials

gulp-sass 从 s10=] 到 css 的文件转换时抛出错误

gulp-sass throw error on file convertion from scss to css

css

sass

gulp