Search code examples
reactjssassnode-sass

How to import scss files and use them globally in a React application?

I have my React application structures like this:

-src
|-components
 |-Card.js
 |-Card.scss
 |-Navbar.js
 |-Navbar.scss
|-styles
 |-_mixins.scss
 |-_variables.scss
|-App.js
|-App.scss

I use node-sass so for component-x I just need to import component-x.scss to apply the scss file. However I have the _mixins.scss and _variables.scss which I need to use on everywhere, I cannot import them in each scss file. How can I import these files globally so I could use them anywhere I want?

Solution

  • Create a main.scss and import all inside!

    There is an example with your files:

    /********************************SASS MAIN***********************************/
//COMPONENTS
@import "components/card";
@import "components/navbar";

//STYLES
@import "styles/mixins";
@import "styles/variables";

    Then in your App.js just import 'main.scss'

    more info about import in sass here