Global Sass Variables

You can add global sass variables in next js project easily, however in a project which is build with CRA, this is not possible. "glob-sass-var" runs with webpack-dev-server, so you can add your sass variables in custom webpack config and use it as global.

Installation

1.Install the latest version of the package from npm

npm i glob-sass-var

2.Update the existing calls to react-scripts in the scripts section of your package.json to use the webpack

"scripts": {
-  "start": "react-scripts start"
+  "start": "webpack-dev-server"
-  "build": "react-scripts build"
+  "build": "webpack -w"
+  "glob-config": "glob-sass-var-cli"
}

3.Add this line to tsconfig.json

  "compilerOptions":
  {...
    "outDir": "./dist/",
    ...}

4.Run this command in terminal

   npm run glob-config

5.Add the number of your paths and their absolute addresses whenever you were asked. Don't worry if you enter wrong info, you can change it later in webpack.config.ts as an array

          {...
              {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: [path.resolve(__dirname)+"/your absolute path",
                            ...
                            ]
                        }
                    }
                ],
            },
          }

6.If you have babelrc and webpack config from before, "glob-sass-var" will keep your config as a comment, inorder to customize your own config, you can uncomment yours and add them again

🚀 About Me

I'm a front end developer...

🔗 Links