vueless样式变量

安装依赖

npm install less less-loader --save

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

build》utils.js

将以下代码复制到 generateLoaders(声明函数xixi修修改

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


修改参数

 如下&＃xff1a;

return {css: generateLoaders(),postcss: generateLoaders(),less: lessResourceLoader(&＃39;less&＃39;),sass: generateLoaders(&＃39;sass&＃39;, { indentedSyntax: true }),scss: generateLoaders(&＃39;sass&＃39;),stylus: generateLoaders(&＃39;stylus&＃39;),styl: generateLoaders(&＃39;stylus&＃39;)}

 声明全局变量&＃xff1a;src>assets>style>public.less

&＃64;sidebar:240px;
&＃64;headerHeight:65px;
&＃64;bodyMinWidth: 700px;
&＃64;allColor:#4312c9;
&＃64;allWidth:1500px;

 引用页面

跑一下,报错&＃xff0c;莫急

this.getOptions is not a function报错的主要原因是 vue脚手架中less-loader的版本过高导致的

删除原先的版本

npm uninstall less-loader


重新安装

npm install less-loader&＃64;4.1.0 --save


至此&＃xff0c;npm run dev