1.安装
2.配置setting.json
“less.compile”: {
“compress”: true, // 是否删除多余空白字符
“sourceMap”: false, // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件
“out”: true, // 是否输出css文件,false为不输出
“outExt”: “.css”, // 输出文件的后缀,默认为.css 或 .wxss
“files.associations”: { “*.vue”: “vue” },
“vetur.validation.style”: false
}
但是天真的我发现它根本不好使,使用了lang='less’一直报错,依赖不存在
3.后来查到需要在webpack.base.conf.js上添加一个rules节点
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”
},
但是还是报错Module build failed: TypeError: loaderContext.getResolve is not a function
这个错误一般都是由less-loader版本过高导致的,版本号可以在 package.json 中查看;
4.卸载原来的 npm uninstall less-loader;
安装指定版本 npm install less-loader@4.1.0 --save
sass安装
我新建vue文件时会默认使用scss,但是他总是报错,所以我要进行安装
vs下载easy sass
npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save
npm install style-loader --save
在build/webpack.base.config.js中添加:
{
test: /.scss$/,
loaders: [‘style’, ‘css’, ‘sass’]
}