Simplify SCSS @import paths with WebPack 2

Question

I currently have a project setup that uses the sass-loader WebPack plugin. This means that we can easily import SCSS from node_modules using the following:

@import "~bootstrap/scss/mixins/breakpoints";

Is there a way I can create a shortcut like above, to make imports of my own SCSS files a bit simpler. I would like to be able to convert for example:

@import '../../../../styles/app';

to

@import '~styles/app';

or even

@import 'styles/app';

I currently have the following resolver settings in my webpack.config.js:

// ....
resolve: {
    alias: {
        selectize$: path.join(__dirname, './node_modules/selectize/dist/js/selectize')
    },
    extensions: ['.ts', '.js'],
    modules: ['./node_modules']
},
resolveLoader: {
    modules: ['./node_modules']
}
//....

Answer 1

To get it working, I changed the node-sass importer options through sass-loader to allow loading for example styles/app from src/styles/app

{
    exclude: [ /* excludes */ ],
    test: /\.scss$/,
    loaders: [
        'exports-loader?module.exports.toString()',
        'css-loader',
        'postcss-loader',
        {
            loader: 'sass-loader',
            options: {
                importer: (url, prev, done) => {
                    if (url[0] === '~') {
                        url = path.resolve('node_modules', url.substr(1));
                    } else if (url.startsWith('styles/')) {
                        url = path.resolve('src/', url);
                    }

                    return {file: url}
                }
            }
        }
    ]
}

This way, WebPack is happy, and after adding the src path in WebStorm as a Resource Root, autocompletion still works, and WebStorm is not complaining that it can't find the file.

This StackOverflow question was quite useful in resolving my issue.