时间戳

首页 > 解决方案 > SASS React.js 未定义变量

css - SASS React.js 未定义变量

问题描述

我是 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;

我已将其与其他文件App.scss一起导入到我的中，例如：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". 我正在将我的文件导入到jsx带有import './featuredCard.scss';.

有谁知道为什么会这样？

标签： cssnode.jsreactjssassfrontend

解决方案

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

@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';

推荐阅读