验证中...
本周日【珠海源创会】一起聊聊:PingCAP分布式事务、支付宝移动端实践、GSBN技术框架选型,点此报名占座
语言: 其他
分类: CSS 技巧
最后更新于 2018-10-29 11:14
vue 使用less全局变量
原始数据 复制代码
我们经常用less定义一些全局变量,比如头部的高度,比如主题的颜色,比如侧边栏的宽度,这时我们定义less 全局文件是有必要的,那如何在vue中使用呢?
我首先尝试着把common.less文件,放在main.js中,发现并不起作用。。。
在网上搜了一下,可以这样配置:
首先安装一个包:
npm install less --save-dev
npm install sass-resources-loader --save-dev
然后在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/common.less'), //此处修改为自己的less文件路径
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
path.resolve(__dirname, '../src/common/common.less')路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()
修改完配置文件记得重启服务器:npm run dev
ok, common.less
@sidebar:200px;
@headerHeight:88px;
@Width: 700px;
注意,赋值不是等号
在组件中,就可以使用全局变量了。
<style lang='less' scoped>
.content {
background:red;
height:auto;
margin-left: @sidebar;
width: calc(100%-@sidebar);
}
</style>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close