在项目中我们经常用less来定义一些全局变量,比如字体大小颜色,背景颜色,边框颜色,标题高度,按钮大小等等。 我们把这些less变量定义在const.less文件中,并在main.js,发现并不起作用。
解决方法为:
1、安装 sass-resources-loader
npm install sass-resources-loader --save-dev
复制代码
2、build 的utils.js中exports.cssLoaders = function (options) {}添加代码
function lessResourceLoader(){
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources:[
path.resolve(__dirname, '../src/common/less/const.less')
]
}
}
];
if(options.extract){
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
}else{
return ['vue-style-loader'].concat(loaders)
}
}
复制代码
3、path.resolve(__dirname, '../src/common/less/const.less')改为less所对应的路径 并将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()
这样你就可以在任意组件中中使用const.less中定义的变量了