时间戳

首页 > 解决方案 > 从 scss 到 css 的文件转换时 gulp-sass 抛出错误

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

问题描述

我正在尝试将多个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;
   -----------^

如何解决这个问题？

这是我的吞咽任务：

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

标签： csssassgulp

解决方案

简而言之：

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：

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

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

推荐阅读