less在vue-cli的使用

前言：在vue-cli中构建的项目中使用less可以发现，在package.json并没有less相关的插件，所以需要自行安装。
第一步：安装
npm install less less-loader --save-dev
第二步：在配置文件中配置

*新建一个webpack.dev.conf.js文件，在文件写入以下代码并保存。
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
}
第三步：找到build文件夹，在文件夹里有一个utils.js文件，这个文件提供了一些通用的方法，供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下（把下列代码写进utils.js里并进行保存）：
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp(’\.’ + extension + ‘$’),
use: loader
})
}
return output
}
第四步：vue使用

效果：