iview（view-design）使用定制主题报错问题——vue-cli 4

直接使用iview官方的覆盖大概率都要报错，比如：

 说多了都是泪(•́へ•́╬)

所以经过我踩了一晚上的坑之后，测试出了如下的东西

1.各插件版本

// iview版本
"view-design": "^4.6.1",
// 自定义主题插件
"iview-theme": "^1.1.0",
// less版本
"less": "^4.1.1",
"less-loader": "^6.0.0",

2.vue.config.js

//增加内容
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                },
            },
        },
    },
}

3.在全局样式中引入index.less

// index.less 此文件要在main.js中引入
@import '~view-design/src/styles/index.less';
@primary-color: #6682ef; 

4.项目重新安装，重新启动即可

5.其他

 当然我我使用过降低less版本配置的方式

// less版本
"less": "^2.7.31",
"less-loader": "^5.0.0",

这个配置也是一样可以生效的修改成功的，但是一改成这个配置项目的启动跟热刷新瞬间慢了好几倍，并且伴随着一些新css3样式写法不兼容问题以及无法使用@路径等等。

更多报错请参考这篇文章

vue cli4 使用iVIew 定制主题出现的错误 - 木灵鱼儿 (mulingyuer.com)