6

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 components react-table into my js file.

I used the following article https://til.hashrocket.com/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.

Martin
  • 5,714
  • 2
  • 21
  • 41
Bogdan Daniel
  • 2,689
  • 11
  • 43
  • 76
  • Does this answer your question? [How to get SCSS variables into react](https://stackoverflow.com/questions/66119188/how-to-get-scss-variables-into-react) – Martin Mar 29 '22 at 13:01

5 Answers5

6

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

Андрей Козюля
  • 111
  • 2
  • 6
2

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 component.

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

export default () => Example.hello;
luukvhoudt
  • 1,726
  • 19
  • 33
1

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.com/facebook/create-react-app/issues/10047#issuecomment-724227353 for details.

John Jeffery
  • 990
  • 5
  • 19
0

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 component 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
Ramin eghbalian
  • 2,348
  • 1
  • 16
  • 36
-1

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.

Adam Kosmala
  • 925
  • 6
  • 9