vue配置全局less变量/方法 详细过程
核心:sass-resources-loader组件实现过程如下:1.安装npm i sass-resources-loader -S 2.修改配置文件build/utils.js2.1 在cssLoaders中添加如下代码:// 全局less变量配置function lessResourceLoader() {var loaders = [c...
·
核心:sass-resources-loader组件
实现过程如下:
1.安装
npm i sass-resources-loader -S
2.修改配置文件build/utils.js
2.1 在cssLoaders中添加如下代码:
// 全局less变量配置
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
// 此处地址指向配置less变量的文件
path.resolve(__dirname, '../src/assets/public.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
2.2 配置后如下图所示:
2.3 修改cssLoaders返回值,将less的值替换为刚刚添加的less配置方法lessResourceLoader;
3.创建less变量(方法)配置文件
在2.2配置指向的文件中添加less变量/方法(我设置了src/assets/public.less为less全局文件,实现可依据个人开发情况调整);
4.使用
案例代码
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped lang='less'>
h1 {
color: @color1;
}
</style>
案例效果
ps:以上为个人开发过程中总结,不足之处,欢迎留言指正交流~
更多推荐
已为社区贡献11条内容
所有评论(0)