Question

我有一个非常小的hello world SCSS项目如下：

的index.html

<h1 class="heading-primary">Hello world!</h1>

SASS \ main.scss

@import "base/typography";    //Line A
@import "abstract/variable";

SASS /抽象/ _variable.scss

$color-white: #fff;
$color-black: #000;
$color-red: red;

SASS /碱/ _typography.scss

.heading-primary {
  color: $color-red;
}

的package.json

{
  "name": "starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile":"node-sass ./sass/main.scss css/style1.css -w"
  },
  "author": "sandeep",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.7.2"
  }
}

现在，如果我运行npm run compile，则SASS不会编译，只显示此消息

> starter@1.0.0 compile C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test
> node-sass ./sass/main.scss css/style1.css -w

但是，如果我在main.scss中评论 A行，则SASS可以正常工作

=> changed: C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\sass\main.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\css\style1.css

现在，如果我从main.scss取消注释 A行，我会收到此错误：

{
  "status": 1,
  "file": "C:/Users/sandgup3/Desktop/NodeBook/advanced-css-course/Natours/test/sass/base/_typography.scss",
  "line": 3,
  "column": 10,
  "message": "Undefined variable: \"$color-red\".",
  "formatted": "Error: Undefined variable: \"$color-red\".\n        on line 3 of sass/base/_typography.scss\n>>   color: $color-red;\n   ---------^\n"
}

另外，如果我直接将 _variables.scss 导入 _typography.scss ，则SASS编译正常。

有人可以帮助调试吗？我已将文件上传到GitHub以供参考：Link

Answer 1

这非常简单。您以错误的顺序导入部分内容。首先导入变量（总是），然后导入使用变量的其余部分。

<强> SASS \ main.scss

@import "abstract/variable";
@import "base/typography";

PS：文件应该被称为variables（复数）。

当一个部分使用在另一个部分

1 个答案: