为啥 create-react-app 找不到我的 Sass 变量

Posted 2023-03-06

【中文标题】为啥 create-react-app 找不到我的 Sass 变量

【英文标题】：Why create-react-app cant find my Sass variables为什么 create-react-app 找不到我的 Sass 变量

【发布时间】：2020-04-25 17:09:54

【问题描述】：

我使用 create-react-app 创建 react 应用程序并设置文件结构如下：

src/
 -index.js
 -main.scss
 pages/
  -somepage.js
  -somepage.scss
 styles/
  -_variables.scss

index.js

import './main.scss';
...

ma​​in.scss

@import './styles/variables.scss';

_variables.scss

 $primary: #000;

somepage.js

import somepage.scss

somepage.scss

selector 
 property: $primary; <-- sass can't find that

有什么想法吗？ 谢谢。

【问题讨论】：

为此，您需要确保 somepage.scss 在 variables.scss 之后调用。

还是没有答案？？

【参考方案1】：

@import './styles/variables';
@import './pages/somepage';

您可以在 main.scss 中导入所有样式表，然后您只需要 index.js 中的 import './main.scss';。您也不必指定后缀。

Finding the File

【讨论】：

这意味着我创建的每个页面都需要在 main.scss 中添加导入？不会太多吗？ :O

【参考方案2】：

你需要这个...

npm install node-sass

https://www.npmjs.com/package/node-sass

你可以试试这个吗？

【讨论】：

您是否尝试在 somepage.scss 中导入 _variables.scss 文件？

否，因为我想在我的所有 scss 文件中使用 _variables.scss 而不仅仅是在一个文件中。