在 js 文件中使用 sass 变量 create-react-app

Question

我有一些颜色定义的变量到_colors.scss文件中。

$color-succcess: #706caa;
$color-error: #dc3545;

我还想将它们用于一些样式化的 React 组件react-table到我的 js 文件中。

我使用以下文章https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript作为参考，还有许多其他人喜欢它，但我无法让它工作。

我从我的 scss 文件中导出颜色：

:export {
  colorSuccess: $color-succcess;
  colorError: $color-error;
}

我将它们导入到我的 js 文件中：

import colors from "../../styles/_colors.scss";

但他们可能没有正确加载。

我如何配置 create-react-app 生成的代码以实现与文章中的人使用 webpack 所做的相同的事情。

Answer 1

我遇到了类似的问题，我花了很多时间才得到想要的结果。如果您已经node-sass安装，请尝试以下操作。

首先，尝试导入scss不带下划线的主文件，即代替../../styles/_colors.scss, try../../styles/index.scss或无论您的主文件是什么。
其次，跟踪变量名称。此代码不起作用：

:export {
  $textBlack: $text-black;
}

虽然这个完美地工作

:export {
  textBlack: $text-black;
}

出于某种原因，它不喜欢变量名中的美元符号，尽管它是一个有效的 JS 变量名。你的情况应该可以正常工作

Answer 2

为了在 CRA 中加载 SCSS 文件，您需要将node-sass依赖项添加到 package.json。我已经对其进行了测试，并将其添加到干净的 CRA 项目并导入colors对象（使用:export，就像您提供的代码中一样）按预期工作。