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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

首先，定制主题的修改方式在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 [email protected]npm install [email protected]

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

以上是 Vue踩坑(2)——iview的定制主题my-theme坑 的全部内容， 来源链接： utcz.com/z/374643.html

回到顶部