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

然后在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) } } 

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;

注意，賦值不是等號

在組件中，就可以使用全局變量了。

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

生效！