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

跟踪链接

正在查看react组件中的scss变量。不确定我需要在react组件中调用什么导入名称，因为如果我给出如下导入语句，它会显示一个错误，因为找不到模块“../scss/_variables.scss”

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

这里_variables.scss是包含

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

:export {
  whitecolor: $white-color; }

我挠头想得到react组件中可用的“whitecolor”变量

此外，我使用的网页包如下

{
 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
 }]
}

---

任何帮助都将不胜感激

一种方法是

npm安装节点sass

然后将

app.css

更改为

app.scss

，并在其中导入样式表：

@import'../scss/_variables.scss'

然后你可以像这样使用它

.App-link {
  color: $secondary-color;
}

一种方法是
npm安装节点sass

然后将
app.css
更改为
app.scss
，并在其中导入样式表：

@import'../scss/_variables.scss'

然后你可以像这样使用它

.App-link {
  color: $secondary-color;
}

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

我也面临同样的问题，以下是我所做的：

将
\u variables.scss
重命名为
\u variables.module.scss
，然后从“../scss/\u variables.module.scss”导入
变量

现在，您可以像访问变量一样访问scss变量。whitecolor
在React中导入特定属性不起作用，除非它是一个模块

我也面临同样的问题，以下是我所做的：

将
\u variables.scss
重命名为
\u variables.module.scss
，然后从“../scss/\u variables.module.scss”导入
变量

现在，您可以像访问变量一样访问scss变量。whitecolor
我希望访问typescript/js文件中的scss变量，而不是其他scss文件中的scss变量。您的解决方案适用于在scss文件中传递变量。我希望访问typescript/js文件中的scss变量，而不是其他scss文件中的变量。您的解决方案适用于在scss文件中传递变量。您是否设法解决了此问题？我有一个类似的问题，正在寻找解决方案……我使用了“require”来让它工作。const variables=require（'../scss/_variables.scss'）；我懂了。但您是否使用了
import
？下面是@yatin接受的使用import works的答案。我正在使用MinicsSextract插件和网页包5。minicssextractplugin从1.0.0版本停止支持require模块。所以，我现在不得不使用导入而不是需要模块。您是否设法解决了该问题？我有一个类似的问题，正在寻找解决方案……我使用了“require”来让它工作。const variables=require（'../scss/_variables.scss'）；我懂了。但您是否使用了
import
？下面是@yatin接受的使用import works的答案。我正在使用MinicsSextract插件和网页包5。minicssextractplugin从1.0.0版本停止支持require模块。因此，我现在不得不使用导入而不是require模块。事实证明，当在Vue.js（2.6.x）中导入SCSS变量时，同样的解决方案也能起作用。事实证明，当在Vue.js（2.6.x）中导入SCSS变量时，同样的解决方案也能起作用。