react组件中访问scss变量的问题 [英] problem in accessing the scss variables in react components
问题描述
点击链接
任何帮助将不胜感激!
在 React 中导入特定属性不起作用,除非它是一个模块.
我遇到了同样的问题,这是我所做的:
将 _variables.scss
重命名为 _variables.module.scss
然后导入是 import _variables from '../scss/_variables.module.scss';
现在您可以像 _variables.whitecolor
Followed the link https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
Looking to access the scss varaibles in react component . Not sure with what import name i need to call in react component since if i give as below import statement it is showing an error as cannot find the module '../scss/_variables.scss';
import _variables from '../scss/_variables.scss';
here _variables.scss is the file name which contains
// variables.scss
$white-color: #fcf5ed;
:export {
whitecolor: $white-color; }
I am scratching my head to get the "whitecolor" variable available in react component .
Also, I am using webpack as below
{
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
}]
}
Any help would be highly appreciated!!
Importing specific property in React does not work unless it is a module.
I was facing the same problem and here is what I did:
Renamed _variables.scss
to _variables.module.scss
and then the import is import _variables from '../scss/_variables.module.scss';
now you can access the scss variables just like _variables.whitecolor
这篇关于react组件中访问scss变量的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!