vue项目使用less全局变量

vue 使用less全局变量

2018年07月11日 22:14:52 阅读数：524

 

咱们常常用less定义一些全局变量，好比头部的高度，好比主题的颜色，好比侧边栏的宽度，这时咱们定义less 全局文件是有必要的，那如何在vue中使用呢？ 
我首先尝试着把common.less文件，放在main.js中，发现并不起做用。。。 
在网上搜了一下，能够这样配置： 
首先安装一个包：

npm install sass-resources-loader --save-dev

• 1

而后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：

function lessResourceLoader() { var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/assets/styles/common.less'), ] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

path.resolve(__dirname, '../src/assets/styles/common.less')路径改为本身对应的文件 
而后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

修改完配置文件记得重启服务器：npm run dev 
ok, common.less

@sidebar:240px; @headerHeight:65px; @bodyMinWidth: 700px;

• 1
• 2
• 3

注意，赋值不是等号

在组件中，就能够使用全局变量了。

<style lang='less' scoped> .content { background:red; height:auto; margin-left: @sidebar; width: calc(100%-@sidebar); } </style> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

生效！