javascript - 在 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 文件中:

从“../../styles/_colors.scss”导入颜色；

但它们可能未正确加载。

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

Answer 1

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

1. 首先，尝试导入不带下划线的主 scss 文件，即代替 ../../styles/_colors.scss，尝试../../styles/index.scss 或者你的主文件是什么。

2. 其次，跟踪变量名称。此代码无效:

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

虽然这个工作完美

:export {
  textBlack: $text-black;
}

出于某种原因，它不喜欢变量名中的美元符号，尽管它是一个有效的 JS 变量名。你的案例应该没问题