gulp sass在文件从SCS转换为css时抛出错误

我正在尝试将多个

scs

文件转换为单个

css文件

。

main.scss

文件还使用

variable.scss

文件导入多个文件。当我转换为css文件时，我得到一个错误，如下所示：

[09:46:00] Using gulpfile ~\722333\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;
   -----------^

如何解决这个问题

以下是我的吞咽任务：

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

---

简而言之：

分部文件名应以下划线开头

将部分重命名为

\u variables.scss

，

\u global.scss

，

\u font.scss

，并将

main.scss

更新为：

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

完整解释：

生成失败，因为sass正在尝试将

form.scss

编译为

form.css

，并且找不到对

$color red

的引用

来自Sass-Lang.com：

按照惯例，Sass文件只用于导入，而不用于导入 自行编译，以

\ucode>开头（如
\ucode.scss
）。这些是
他们告诉Sass工具不要试图编译这些代码
文件本身。导入部分时，可以省去u

我发现您的错误在
表单中。scss
该文件必须导入
变量。scss
文件本身或
表单。scss
必须导入
main.scss
才能访问
$color red
（我假设它在
variables.scss
中）。