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

Question

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

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

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

我使用以下文章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，请尝试以下操作。

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

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

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

这是完美的作品

:export {
  textBlack: $text-black;
}

由于某种原因，尽管它是有效的JS变量名称，但它不喜欢变量名中的美元符号。您的情况应该很好

Answer 2

尝试重现这些步骤：

1。通过安装node-sass在CRA中启用sass。

npm i --save-dev node-sass

2。创建一个Sass文件example.scss。

$hello: 'world';

:export {
  my-var: $hello;
}

3。将Sass导入您的react组件。

import React from 'react';
import Example from './example.scss';

export default () => Example.hello;

Answer 3

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