在 create-react-app SassError 中导入变量：未定义变量答案

【问题标题】：Importing variables in create-react-app SassError: Undefined variable在 create-react-app SassError 中导入变量：未定义变量
【发布时间】：2020-08-18 04:50:58
【问题描述】：

我有一个带有 SCSS 样式文件的 create-react-app。有App.scss，我包括所有.scss 样式表和variables.scss，我拒绝所有项目变量。

当我将variables.scss 导入App.scss，然后导入所有组件样式文件时，我收到一个错误SassError: Undefined variable: $grey，我在border-bottom: 1px solid $grey 中使用Header.scss 文件。

如果我将 variables.scss 导入到 Header.scss 中，错误就消失了，一切正常。但我不想在每个组件 .scss 文件中包含变量。

我应该怎么做才能在我的所有项目文件中使用来自 variables.scss 的变量？

我尝试过的：

将variables.scss重命名为_variables.scss并导入为@import 'components/variables';
在App.scss 中的其他导入之前导入variables.scss
直接将variables.scss导入index.scss
在这里搜索答案（没有任何帮助）

variables.scss

$grey: #fefefe;
$black: #000000;

App.scss

@import 'components/variables';
@import 'components/header/Header.scss';

项目结构 screenshot

【问题讨论】：

你项目中的node-sass是否已经安装？
@KolaCaine 是的，我已经安装了 node-sass

标签： css reactjs sass create-react-app

【解决方案1】：

似乎我找到了解决问题的方法。

我不仅将 SASS 文件导入App.scss，还导入相关组件.js-files。所以，当我从 Header.js 文件中删除 import './Header.scss' 时，问题就消失了。

【讨论】：