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

Question

Inside a scss file, I'm trying to import custom, widely used chunk of scss (in a React/SASS/Webpack stack).

So that I can use a shared mixin.

Let's say I'm creating an MyAdminButton and I want to import scss file that concerns all the buttons of the project. (It's custom scss, not vendor/external one).

It would look like this :

//this actually works but it is a code smell : what if the current file moves ? @import "../../stylesheets/_common-btn-styles.scss";  .my-admin-btn {     // here I can use a shared mixin defined in _common-btn-styles.scss } 

This sounds not good since if my scss file move, then everything is broken.

Thanks for your help

Answer 1

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")] }