less在vue中的踩坑小记
算是第三次踩这个坑了,虽然很快解决了,但是还是记一下。
情况
引入了ant vue以后,提示没有less,于是终端提示需要安装该模板。我就傻傻的直接:
yarn add less less-loader
//npm install less less-loader --save-dev也行
结果跑项目时出现如下报错:
bezierEasingMixin()
Inline JavaScript is not enabled. Is it set in your options?
于是找了一下原因,是由于less的版本问题导致的。就非常无语。
解决
查了less、less-loader的版本要求。找了半天,发现有两个版本是可行的:
less:3.0.0 or less:3.9.0 //目测这个区间都行
less-loader:4.1.0 or less-loader:5.0.0 //目测这个区间都行
由于我的项目才开启,于是就用了如下三步:
首先将 package.json
文件中的less、less-loader的版本手动修正
其次删除 yarn.lock
(你用的npm,就删除package.lock.json)和 node_modules文件。
最后重新下载一次yarn,它会对应你的package.json
文件进行重新配置less插件。
正确的安装方式:
yarn add less@3.0.0
yarn add less-loader@5.0.0
or
npm install less@3.0.0
npm install less-loader5.0.0
less、less-loader特么一定要分开装。
不要忘记的点
由于webpack对于 Less-loader 的默认配置是:不合适,我们需要手动将less-loader设置为应用状态。
vue/cli 3以下的,在webpack 配置中 module.rules 中加入,vue/cli3的,在项目目录中创建vue.config.js
// vue/cli 2
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
// vue/cli 3
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
必须说的是:关键点在于javascriptEnabled: true
。
之所以这样说是因为写法还可能与你的webpack版本有关。