import variable.scss everywhere using craco

craco-scss-variables.md

1. yarn add @craco/craco --dev

2. create craco.config.js at the root of your project, and put these in it

module.exports = {
  reactScriptsVersion: 'react-scripts',
  style: {
    sass: {
      loaderOptions: {
        additionalData: `@import "src/assets/styles/variables/index.scss";`
      }
    }
  }
}; 

3. update scripts in the package.json

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}