最近在构建新系统,发现此前没有出现过的less引入报错问题,记录一下。
首先是安装less的过程
(1)安装less和less-loader
输入命令:
npm install less less-loader --save-dev
(2)安装成功之后在build文件夹下的webpack.base.conf.js文件中添加如下语句:
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
(3)之后在需要用到的页面中的样式代码块中添加
<style lang="less" scoped>
样式语句
</style>
接着出现问题,在运行的时候直接报了一串错误,这里给出我这里出现错误的原因,由于vue版本跟less版本相差较大,应该是vue的版本较低,因此我们可以安装低版本的less来兼容。
npm install less@3.9.0 -s
npm install less-loader@5.0.0 -s