I have some color defined variables into _colors.scss file.

$color-succcess: #706caa;
$color-error: #dc3545;

I would like to also use them into some styled react ponents react-table into my js file.

I used the following article as reference and many others like it but I cannot get it to work.

I export the colors from my scss file:

:export {
  colorSuccess: $color-succcess;
  colorError: $color-error;
}

and I import them into my js file:

import colors from "../../styles/_colors.scss";

but they are probably not loaded right.

How can I configure the create-react-app generated code to achieve the same thing as the guy in the article does with webpack.

I have some color defined variables into _colors.scss file.

$color-succcess: #706caa;
$color-error: #dc3545;

I would like to also use them into some styled react ponents react-table into my js file.

I used the following article https://til.hashrocket./posts/sxbrscjuqu-share-scss-variables-with-javascript as reference and many others like it but I cannot get it to work.

I export the colors from my scss file:

:export {
  colorSuccess: $color-succcess;
  colorError: $color-error;
}

and I import them into my js file:

import colors from "../../styles/_colors.scss";

but they are probably not loaded right.

How can I configure the create-react-app generated code to achieve the same thing as the guy in the article does with webpack.

• javascript
• reactjs
• sass
• create-react-app
• icss

• Does this answer your question? How to get SCSS variables into react – Martin Commented Mar 29, 2022 at 13:01

5 Answers 5

I have faced a similar issue, and it took me a bunch of tries to get the desired result. If you already have node-sass installed, try the following.

1. First of all, try importing the main scss file without the underscore, i.e. instead of ../../styles/_colors.scss, try ../../styles/index.scss or whatewer your main file is.

2. Secondly, keep track of the variable names. This code DID NOT work:

:export {
  $textBlack: $text-black;
}

while this one works perfectly

:export {
  textBlack: $text-black;
}

For some reason it does not like the dollar sign in the variable name, though it is a valid JS variable name. Your case should work fine

Try to reproduce these steps:

1. Enable sass in CRA by installing node-sass.

npm i --save-dev node-sass

2. Create a sass file example.scss.

$hello: 'world';

:export {
  my-var: $hello;
}

3. Import the sass into your react ponent.

import React from 'react';
import Example from './example.scss';

export default () => Example.hello;

If you are using CRA version 4, there is a known issue where this feature will not work unless you define your scss file as <name>.modules.css.

See https://github./facebook/create-react-app/issues/10047#issuement-724227353 for details.

install the sass in the project if you didn't install that.

yarn add --dev node-sass

create a file and use this rule to name it => filename.module.scss ( for example variables.module.scss )

$color-succcess: #706caa;
$color-error: #dc3545;

:export {
  colorSuccess: $color-succcess;
  colorError: $color-error;
  otherColor: #786539;
} 

and import it in the ponent like below:

import colors from "../../styles/_colors.module.scss";

const TheComponent = () => {
   console.log(colors.colorSuccess)

   return <h1>The Component</h1>
}

export default TheComponent

// output in console : #706caa

In order to load SCSS files in CRA you need to add node-sass as your dependency to package.json. I've tested it out and after adding it to clean CRA project and importing colors object (using :export, like in the code you provided) works as expected.