How to use absolute path to import custom scss, when using react + webpack?

css reactjs sass webpack

Found. Actually you can configure sass-loader in webpack.config.json, as described here : https://github.com/jtangelder/sass-loader

Here is the relevant part :

sassLoader: {   includePaths: [path.resolve(__dirname, "./some-folder")]}

css reactjs sass webpack

If you use Create React App v3 which allows absolute imports you can use the tilde

@import "~theme/colors";

css reactjs sass webpack

In react-scripts latest version you can add a .env file at the project root with the variable SASS_PATH=node_modules:src.

To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3

CodeHunter