时间戳

首页 > 解决方案 > problem in accessing the scss variables in react components

reactjs - problem in accessing the scss variables in react components

问题描述

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

enter image description here

Any help would be highly appreciated!!

标签： reactjssass

解决方案

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

我遇到了同样的问题，这就是我所做的：

重命名_variables.scss为_variables.module.scss，然后导入为import _variables from '../scss/_variables.module.scss';

现在您可以像访问 scss 变量一样_variables.whitecolor

推荐阅读