无法使用反应应用程序访问 sass 变量编译错误

Posted

技术标签:

【中文标题】无法使用反应应用程序访问 sass 变量编译错误【英文标题】:Can't access sass variables compile error with react app 【发布时间】:2018-08-15 06:32:56 【问题描述】:

我正在使用create-react-app 创建一个反应应用程序,并且我尝试通过在here 上执行这些步骤来实现 SASS 预处理器。所以一切都很顺利,我已经开发了我的应用程序的某些部分。但是由于一个非常奇怪的原因,经过 2 天的开发,我现在在编译时出现错误,没有任何我能想象的原因。


  "status": 1,
  "file": "/Users/glenngijsberts/Documents/Development/toggle/src/components/sass/assets.scss",
  "line": 2,
  "column": 9,
  "message": "Undefined variable: \"$primary\".",
  "formatted": "Error: Undefined variable: \"$primary\".\n        on line 2 of src/components/sass/assets.scss\n>> \tcolor: $primary;\n   --------^\n"

所以主要问题是我现在得到一个编译错误,因为我的assets.scss 无法访问变量。资产被导入到我的 App.scss 中,该 App.scss 也导入了 variables.scss。

在我的 App.scss 文件中

//Import SCSS
@import "./sass/vars.scss";

@import "./sass/popup.scss";
@import "./sass/assets.scss";
@import "./sass/utils.scss";
@import "./sass/modal.scss";
@import "./sass/dropdown.scss";
@import "./sass/visualLine.scss";
@import "./sass/dashboard.scss";
@import "./sass/tabs.scss";
@import "./sass/projects.scss";
@import  "./sass/colors.scss";

什么是有效的:

assets.scss

//Import SCSS
@import "vars.scss";

span.brand 
    color: $primary;
 

当然,我不喜欢在我想使用 scss 变量的每个 scss 文件中包含 vars 文件。我也不习惯(在常规 webpack 项目中仅使用 sass 文件时)。

【问题讨论】:

【参考方案1】:

您必须将“_”放在要全局导入的每个文件的开头名称。所以你的 vars.scss 将是 _vars.scss。听起来很奇怪,但有效。 如果没有帮助,请将文件重命名为 *.sass 并使用 sass 语法。它更简单,可以 100% 工作。

【讨论】:

以上是关于无法使用反应应用程序访问 sass 变量编译错误的主要内容,如果未能解决你的问题,请参考以下文章

无法编译反应应用程序,因为它显示“未找到模块”

预编译时的 Sass 未定义变量

使用 node-sass 编译 SCSS 时出现未定义变量错误

如何实现 SASS 以与原始 webpack 做出反应?

如何从反应道具传递到 sass 变量?

编译器警告“找不到模块:错误:无法解析'./locale'”,因为我在我的反应应用程序中使用了 momentjs [重复]