dvajs+antd定制主题踩坑记录

       记一下刚刚解决的问题，困扰了几周，期间困兽争斗，甚至想放弃antd组件库。终于出来了，人类科技又进步了（才怪）。

       首先我按照dva官网建立了项目。里面引入antd的各种组件，因为需要用到一个switch开关组件，但是颜色不是我想要的颜色，首先我F12查到是“.ant-switch-checked”这个class，出于我只是想改个按钮选中颜色的想法，我决定在全局class里写上新的“ant-switch-checked”来覆盖这个主题默认的按钮色，结果试了了各种：globle @import等方式都不行，加上发现load等颜色也需要修改，未来还有其他组件需要改，只好向文档低头。

       根据adtd官网的定制主题https://ant.design/docs/react/customize-theme-cn，修改了packagejson.当然是没有用的。辗转搜索发现要改.webpack,config.js。哦，改就改吧，可是dvacli创建的项目根本没有这个文件。后来翻了一下文档，看见了说要改.roadnogrc,也是没有的文件。再翻，发现dva作者更新了，把.roadnogrc迁移到了.webpackrc。所以改webpackrc可以，webpackrc里内容要改成这个样子，才能定制主题。style不能是css，要是true。

{
    "theme": {
    "@primary-color": "#fd8249"
    },
    "extraBabelPlugins": [
         ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}]
    ]
    
   
}

       改了这个文件颜色是不是就能用了呢？天真！你会发现有报错：Inline JavaScript is not enabled。谷歌了一下大佬们说把less的版本改到2.x.x可行，抱着试一试的心态，重新npm，发现主题颜色真的改成功了，喜大普奔……

     改后的package.json

 

 

      中途我还尝试了antdmobile。然后发现我想要用switch组件还要引入一个rcfrom。觉得不如antd方便，就放弃了这个做法。以后可能还是要学，到时候再看吧。

 

转载于:https://www.cnblogs.com/liyinSakura/p/9447447.html