使用 WebPack 2 简化 SCSS @import 路径
Simplify SCSS @import paths with WebPack 2
我目前有一个使用 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']
}
//....
为了让它工作,我通过 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 路径作为 Resource Root 后,自动完成仍然有效,并且WebStorm 没有抱怨找不到文件。
对解决我的问题非常有用。
我目前有一个使用 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']
}
//....
为了让它工作,我通过 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 路径作为 Resource Root 后,自动完成仍然有效,并且WebStorm 没有抱怨找不到文件。