vue@4.x+ant design vue@2.x+less遇到的问题

目录

一、配置全局less文件

二、在main.ts中引入import 'ant-design-vue/dist/antd.less'; 导致的一系列错误

三、在删除node_modules文件后报：Unexpected end of JSON input while parsing near错误

---

一、配置全局less文件

npm i less-loader less --save
npm i style-resources-loader --save

const path = require('path')
module.exports = {
   pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, './src/assets/css/base.less')] // less所在文件路径
        }
      }
  }

在.less文件中编写变量，在.vue文件中使用该变量即可！

如果此时仍报错@bg变量没有声明，需再安装：npm i vue-cli-plugin-style-resources-loader --save-dev

// base.less文件中声明变量：
@bg:#f00;

 原文：https://www.it610.com/article/1293484842318635008.htm

二、在main.ts中引入import 'ant-design-vue/dist/antd.less'; 导致的一系列错误

TypeError: this.getOptions is not a function 引入less一直报错

这个是因为版本问题，我安装的less是@8.x

解决：降到@7.0

//卸载
npm uninstall --save less-loader
//安装指定版本
npm install -D less-loader@7.x

至此上个问题解决出现新的错误：加载报错.bezierEasingMixin()

解决：在vue.condig.js中进行配置

module.exports = {
    lintOnSave: false,
    //关键
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    }
    //关键
}

至此上一个问题解决，出现新的问题： ValidationError: Invalid options object. Less Loader has been initialized using an option

这个是因为版本问题，解决：继续降低版本

//卸载
npm uninstall --save less-loader
//安装指定版本
npm install -D less-loader@5.0.0

至此解决完成

三、在删除node_modules文件后报：Unexpected end of JSON input while parsing near错误

解决办法：

运行  npm cache clean --force。