gulp-sass 在从 scss 到 css 的文件转换时抛出错误答案

【问题标题】：gulp-sass throw error on file convertion from scss to cssgulp-sass 在从 scss 到 css 的文件转换时抛出错误
【发布时间】：2023-03-17 01:35:02
【问题描述】：

我正在尝试将多个 scss 文件转换为单个 css file。 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;
   -----------^

如何解决这个问题？

这是我的 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;
}

【问题讨论】：

我看到您的错误出现在 form.scss 中在variables.scss。

标签： css sass gulp

【解决方案1】：

简而言之：

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

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

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

完整解释：

构建失败，因为 sass 试图将 form.scss 编译为 form.css 并且找不到对 $color-red 的引用。

来自 Sass-Lang.com：

按照惯例，Sass 文件仅用于导入，而不是自行编译，以_ 开头（如_code.scss）。这些是称为部分，它们告诉 Sass 工具不要尝试编译那些自己的文件。导入部分时可以省略 _。

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

【讨论】：