使用WebPack 2简化SCSS @import路径

时间:2017-06-22 10:15:47

标签: webpack webpack-2 sass-loader

我目前有一个使用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']
}
//....

1 个答案:

答案 0 :(得分:0)

为了使其正常工作,我通过sass-loader更改了node-sass importer 选项,以允许从styles/app

加载示例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}
                }
            }
        }
    ]
}

这样,WebPack很高兴,并且在WebStorm中添加 src 路径作为资源根之后,自动完成仍然有效,并且WebStorm并没有抱怨它可以&# 39;找不到文件。

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