SASS React.js 未定义变量答案

【问题标题】：SASS React.js Undefined VariableSASS React.js 未定义变量
【发布时间】：2021-04-29 06:47:06
【问题描述】：

我是 SASS 和 React.js 的新手。我在这个平台上搜索了很多答案，似乎无法发现我的问题。我有一个部分文件_variables.scss，如下所示：

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

$raleway-font: 'Raleway', sans-serif;

我已将它与我的其他 scss 文件一起导入到我的 App.scss 中，例如：

// Utilities
@import 'styles/variables';

// Stylesheets
@import '~bootstrap/scss/bootstrap';
@import 'components/navigationBar/navbar';

@import 'components/main/main';
@import 'components/main/mostRecent/mostRecent';
@import 'components/main/mostRecent/recentCard/recentCard';
@import 'components/main/featuredCard/featuredCard';

但是当我尝试在任何文件中使用该变量时，例如featuredCard.scss - 我得到了错误：

SassError: Undefined variable: "$raleway-font".

请注意，我使用了 create-react-app，并安装了 "node-sass": "^4.14.1"。我正在使用import './featuredCard.scss'; 将我的文件导入到jsx 文件中。

有人知道为什么会这样吗？

【问题讨论】：

变量只在它的闭包中起作用。这意味着您需要在每个样式块中导入它。

标签： css node.js reactjs sass frontend

【解决方案1】：

显然你错误地导入了变量的地址，

@import 'styles/variables';

检查您是否没有正确放置 variables.scss 的地址的一种方法是复制 'components / main / featuredCard / featuredCard'; 中的代码

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

$raleway-font: 'Raleway', sans-serif;

//code featuredCard

并评论@import 'styles/variables';

【讨论】：