2.20vuecli构建项目使用less

在vue-cli中构建的项目是可以使用less的&＃xff0c;但是查看package.json可以发现&＃xff0c;并没有less相关的插件&＃xff0c;所以我们需要自行安装。

第一步 安装
打开cmd命令行&＃xff0c;执行npm install less less-loader --save-dev&＃xff0c;通过npm安装less和less-loader&＃xff0c;并记录到devDependencies中&＃xff0c;出现下图所示即表示安装成功

第二步 在配置文件中配置
​在如图所示的文件夹下新建webpack.dev.conf.js文件&＃xff0c;并写上如下代码

module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
}

即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的module。

注意&＃xff1a;在上面的代码中&＃xff0c;我们还可以使用loaders来代替rules&＃xff0c; 他们的含义是一样的。

在build文件夹下有一个utils.js文件&＃xff0c;这个文件提供了一些通用的方法&＃xff0c;供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下&＃xff1a;
&＃xff08;打开untils.js的方法
打开npm文件夹&＃xff0c;在右边的搜索框中搜索build

打开utils.js

&＃xff09;
在untils.js中写入
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders &＃61; function (options) {
var output &＃61; []
var loaders &＃61; exports.cssLoaders(options)
for (var extension in loaders) {
var loader &＃61; loaders[extension]
output.push({
test: new RegExp(’\.’ &＃43; extension &＃43; ‘$’),
use: loader
})
}
return output
}

通过这个方法可以对大多数css预处理进行了配置&＃xff0c;具体配置在cssLoaders方法中。

第三步 在单组件.vue中使用

需要注意一下几点&＃xff1a;

1、已经在webpack中配置了&＃xff0c;所以这里不需要引入任何less文件。
2、在style中声明lang&＃61;“less”。 注意&＃xff1a; scoped的作用仅仅是限定css的作用域&＃xff0c;防止变量污染。
3、这样就可以根据less的语法使用了。