用WebPack 2简化SCSS @导入路径
用WebPack 2简化SCSS @导入路径
提问于 2017-06-22 10:15:46
我现在有一个使用sass-装载机 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
Stack Overflow用户
回答已采纳
发布于 2017-06-22 12:15:20
为了使其正常工作，我通过sass加载器更改了节点sass导入器选项，以允许从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没有抱怨它找不到文件。
这个StackOverflow问题在解决我的问题上非常有用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44696516
复制相关文章
相似问题
腾讯云开发者
