problem in accessing the scss variables in react components

Question

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!!

Did you manage to resolve the issue? I have a similar problem and looking for a solution... — desa
– desa, Commented Apr 3, 2021 at 13:57
I have used "require" to make it work . const variables = require('../scss/_variables.scss'); — Srinu Merugu
– Srinu Merugu, Commented Apr 5, 2021 at 6:24
Below accepted answer from @yatin to use import works. I am using minicssextractplugin with webpack 5. And minicssextractplugin stopped supporting require module from 1.0.0 version. So, I had to use import rather than require module now. — Srinu Merugu
– Srinu Merugu, Commented Apr 8, 2021 at 16:31

Yatin Gaikwad · Accepted Answer · 2020-08-05 17:43:20Z

12

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

answered Aug 5, 2020 at 17:43

Yatin Gaikwad

1,2102 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jhadenfeldt Over a year ago

Turns out, the same solution works when you have issues importing SCSS variables in Vue.js (2.6.x).

Premji · Accepted Answer · 2021-09-23 08:35:19Z

-1

On the react app, you can import the variable.scss in App.scss file. If there is no file just create it.

make sure that you have installed node-sass.

@import "../scss/_variables.scss";

Now the variables are accessible, I am using React Webpack. Also, we have other options please check here

Thanks, Prem

edited Sep 23, 2021 at 8:35

answered Sep 23, 2021 at 8:19

Premji

871 silver badge6 bronze badges

Comments

Jake · Accepted Answer · 2019-08-01 18:54:31Z

-2

One way would be to npm install node-sass

Then change your app.css to app.scss and in there you import your stylesheet:

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

Then you can use it like

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

answered Aug 1, 2019 at 18:54

Jake

7427 silver badges21 bronze badges

1 Comment

Srinu Merugu Over a year ago

I want to access the scss variables in typescript/js files not inside the other scss files . Your solution works for passing variables in scss files .

Collectives™ on Stack Overflow

problem in accessing the scss variables in react components

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related