When using sass, how to import sass variables?

[grundmanise]

Hi, first of all thanks for such a great react development setup & build automation tool.

When using create-react-app with node-sass. How to expose sass variables to my project? Can't get my head around..

My folder structure for the reference:

└───src
    ├───app
    │    └───variables.scss // here are all my vars
    ├───components
    │   └───Header // there is Header.scss in this folder, where I need to use my variables
    ├───helpers
    ├───public
    └───utils

[viankakrisna]

one way to do it is just import any scss file from your root index.scss

so rather than placing import './Header.css'; in Header.js
You do

@import "./app/variables.scss";
@import "./components/Header/Header.scss";

in index.scss

and import './index.css' in index.js

[grundmanise]

@viankakrisna thanks, this works! :)

[gaearon]

Couldn't you also @import "../../variables.scss"; or equivalent from any component's Sass file that needs them?

[gaearon]

Closing with 67d0d49.

[viankakrisna]

As always, @gaearon comments is an eye opener 👍 @grundmanise please use this instead of my suggestion. It's more inline with component based structure.

[woniesong92]

@gaearon do you have a suggestion to use absolute paths for sass imports? For example, when trying to import src/shared/variables.scss from a deeply nested component, there are a lot of ../../../. Related: #1712 (for importing JS files)

[gaearon]

No, I don’t know how to solve this aside from moving them into an npm package and then using ~packagename/file.css.

[brianbuie]

You can use sass-resources-loader to load global variables into every sass file before output. In addition to the other style loaders for scss files in your webpack config:
{ loader: 'sass-resources-loader', options: { resources: './client/scss/resources/**/*.scss' }}
This will load all files in the client/scss/resources directory and subdirectories into scope for all processed scss files. As long as those files don't directly generate css, you won't get any repeated code in your output css.

[bengrunfeld]

Getting hit with an error when trying to use @import inside of a SASS file in a create-react-app app. SASS has been set up as the docs suggest. Here is a link to the offending file.

Error Message

{
  "status": 1,
  "file": "/Users/ben/Desktop/Work/code/indio-form-builder/src/components/Tab/tab.scss",
  "line": 3,
  "column": 1,
  "message": "media query expression must begin with '('",
  "formatted": "Error: media query expression must begin with '('\n        on line 3 of src/components/Tab/tab.scss\n>> .active a {\n   ^\n"
}

My code

@import "./constants.scss"

.active a {
  background-color: $tabColor;
}

[amackintosh]

You can also load the styles into a root component and pass them down as props, but maybe that is just a React Native strategy, I'm not certain.

I will just mention it anyway for the more savage yet creative individuals. It can facilitate theming your app by swapping out variables at the root level, perhaps based on user-preferences.

[hom-bahrani]

@woniesong92 npm package seems to work for me, also have very deeply nested files

[transiient]

@bengrunfeld you're missing a semicolon on your import. Damn things.

[m-salamon]

Any new suggestions?
I'm using Sass in a Create React App project. I have a master.scss file with global var's, I would like to use those var's globally... (I don't want to @import "master" in every scss file ), Any other ideas how to make it globally available ?