我们在vue中引入less:
npm install less less-loader --save
配置less:
编辑 webpack.base.conf.js文件,修改module>rules添加:
{ test: /.less$/, loader: "style-loader!css-loader!less-loader", },
直接使用:
<template> <div class="container">Test1</div> </template> <style lang="less"> @color:#000; @ 100px; @height: 100px; @bg:#ccc; .comm-font{ color:@color; font-size:20px; } .container{ @width; height: @height; background: @bg; .comm-font } </style>
这样less已经可以使用了,可是对于一个工程来说,我们希望全局使用这些变量,公共样式等
新建文件:src/assets/common/common.less存放公共变量样式
@color:#000; @ 100px; @height: 100px; @bg:#ccc; .common-container{ background: @bg; }
安装资源预处理器Style Resources Loader
npm i style-resources-loader -D
修改build/utils.js文件中方法generateLoaders
// generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } if(loader == 'less'){ loaders.push({ loader: 'style-resources-loader', options: { patterns: path.resolve(__dirname, '../src/assets/common/common.less') } }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
现在就可以在全局使用了,我们看看效果:
<template> <div class="container">Test1</div> </template> <style lang="less"> .comm-font{ color:@color; font-size:20px; } .container{ @width; height: @height; background: @bg; .comm-font } </style>