我们经常用less定义一些全局变量,比如头部的高度,比如主题的颜色,比如侧边栏的宽度,这时我们定义less 全局文件是有必要的,那如何在vue中使用呢?
我首先尝试着把common.less文件,放在main.js中,发现并不起作用。。。
在网上搜了一下,可以这样配置:
首先安装一个包:
npm install sass-resources-loader --save-dev
然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码:
path.resolve(__dirname, '../src/assets/styles/common.less')路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()
修改完配置文件记得重启服务器:npm run dev
ok, common.less
注意,赋值不是等号
在组件中,就可以使用全局变量了。
<style lang='less' scoped>
.content {
background:red;
height:auto;
margin-left: @sidebar;
width: calc(100%-@sidebar);
}
</style>
OK!!!!