作者:kim
来自:kimshareclub微信公众号
1、安装sass资源加载器
npm install sass-resources-loader -D
2、在build/utils.js里添加如下配置
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
# 注释原始配置
// scss: generateLoaders('sass'),
# 新增以下代码
+ scss: generateLoaders('sass').concat({
+ loader: 'sass-resources-loader',
+ options: {
+ resources: path.resolve(__dirname, '../src/assets/css/element-variables.scss')
+ // 需要全局引入的文件
+ }
+ }),
# 新增结束
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
3、在页面上使用全局变量:$–color-white
<style lang="scss" scoped>
.sidebar{
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0px;
overflow-y: scroll;
# 使用全局变量
background-color: $--color-white;
}
</style>