详解Vue 全局引入bass.scss 处理方案
为解决在Vue组件中全局引入scss变量及mixins，装载了一个名为"sass-resources-loader"解析器。
安装
$>cnpmi-Dsass-resources-loader
配置
配置的话是在vue的loader解析器中配置，即在vue-cli脚手架方式构建出来的文件中是以build/utils.js，在该文件中定义了cssLoaders()方法，该方法定义了诸如css、less的解析方式，具体如下。
//build/utils.js
exports.cssLoaders=function(options){
options=options||{}
...
return{
//...
sass:generateLoaders('sass',{indentedSyntax:true}),
//定义在这里=======================》
scss:generateLoaders('sass').concat(
{
loader:'sass-resources-loader',
options:{
resources:path.resolve(__dirname,'../src/common/style/global.scss')//需要全局引入的文件
}
}
),
//定义在这里=======================》
//...
}
}
//global.scss
@mixinline-height($height){
height:$height;
line-height:$height;
}
$head-height:.45rem;
//xx.vue
height:@includeline-height(45px);
建议
在global.scss中只需要定义变量或者是mixins（混合）。
参考
https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。