访问react组件中的scss变量时出现问题

按照链接进行操作https://mattferderer.com/use-sass-variables-in-typescript-and-javascript https://mattferderer.com/use-sass-variables-in-typescript-and-javascript

希望访问 React 组件中的 scss 变量。不确定我需要在反应组件中调用什么导入名称，因为如果我给出如下导入语句，它会显示错误，因为找不到模块“../scss/_variables.scss”；

import _variables from '../scss/_variables.scss';

这里 _variables.scss 是文件名，其中包含

 // variables.scss
$white-color: #fcf5ed; 

:export {
  whitecolor: $white-color; }

我正在挠头以获取反应组件中可用的“whitecolor”变量。

另外，我正在使用 webpack，如下所示

{
 test: '/.scss$/',
 use: [{
  loader: 'style-loader' // creates style nodes from JS strings
 }, {
  loader: 'css-loader' // translates CSS into CommonJS
 }, {
  loader: 'sass-loader' // compiles Sass to CSS
 }]
}

任何帮助将不胜感激！

除非它是一个模块，否则在 React 中导入特定属性是不起作用的。

我面临着同样的问题，这就是我所做的：

Renamed _variables.scss to _variables.module.scss然后导入是import _variables from '../scss/_variables.module.scss';

现在您可以访问 scss 变量，就像_variables.whitecolor