react 图片绝对路径,使用React + Webpack时如何使用绝对路径导入自定义scss？

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

解决方案

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

}