使用 WebPack 2 简化 SCSS @import 路径答案

【问题标题】：Simplify SCSS @import paths with WebPack 2使用 WebPack 2 简化 SCSS @import 路径
【发布时间】：2017-11-25 13:30:39
【问题描述】：

我目前有一个使用sass-loader WebPack 插件的项目设置。这意味着我们可以使用以下命令轻松地从 node_modules 导入 SCSS：

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

有没有一种方法可以像上面一样创建快捷方式，让我自己的 SCSS 文件的导入更简单一些。我希望能够转换例如：

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

到

@import '~styles/app';

甚至

@import 'styles/app';

我的 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']
}
//....

【问题讨论】：

尝试添加样式：path.resolve(__dirname, './src/styles') 到resolve.alias，但没有任何改变。

标签： webpack webpack-2 sass-loader

【解决方案1】：

为了让它工作，我通过 sass-loader 更改了 node-sass importer 选项，以允许从 src/styles/app 加载例如 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}
                }
            }
        }
    ]
}

这样一来，WebPack 就高兴了，在 WebStorm 中添加 src 路径作为 Resource Root 后，自动补全仍然有效，WebStorm 也没有抱怨它可以'找不到文件。

This StackOverflow question 对解决我的问题非常有用。

【讨论】：

哇...这个解决方案是钻石！