Vue踩坑(2)——iview的定制主题my-theme坑

首先，定制主题的修改方式在iview官方文档就有，但是 文档给出的并不完整

这里只说说覆盖变量的方式，我也只用了这方式，PS:官方文档地址

1. webpack.base.conf.js 需要修改

将文件rules中的关于less的规则去掉

2.bulid/utils.js需要修改

文件中的less设置改为如上图，less: generateLoaders('less', { javascriptEnabled: true })

至此，一般来说就可以正常使用了

3.less与less-loader版本太高

报错为：

1. Module build failed: TypeError: loaderContext.getResolve is not a function
2. var content = require("!!../../node_modules/css-loader/index.js??ref--8-1!../../node_modules/postcss-loader/lib/index.js??ref--8-2!../../node_modules/less-loader/dist/cjs.js??ref--8-3!./index.less");
3. 甚至----只是报你的my-theme文件路径错误而你的路径是没问题的

解决：
替换低版本的less和less-loader依赖，可以在package.json文件中查看，如下：


原来我的less-loader版本是6.1.1+的，less是4.0.0+似乎，之后换成低的版本，如上面的："less-loader": "^4.1.0" "less": "^2.7.1"
具体的命令行操作：

• 删除原来的less npm uninstall less，如果是全局的用npm uninstall less -g
• 删除原来的less-loadernpm uninstall less-loader
• 安装指定版本 npm install less-loader@4.1.0 npm install less@2.7.0

至此，谢谢！欢迎有问题留言一起交流