从scss到css文件转换时的抛出错误
提问于 2020-11-23 20:20:42
我正在尝试将多个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;
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-02 06:26:16
简而言之：：
部分文件名应以下划线开头。
将部分重命名为_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)开头。它们被称为partials，它们告诉Sass工具不要试图自己编译这些文件。导入部分时可以关闭__。
https://sass-lang.com/documentation/at-rules/import#partials
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64980194
复制
腾讯云开发者
