less在vue中的踩坑小记

888 阅读1分钟

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版本有关。