![19650bbccfdd618cf777e1dfef7e88c0.png](https://i-blog.csdnimg.cn/blog_migrate/b15b66e0672a4f2a0fcfc830a45ba896.jpeg)
React17.0.1项目使用antd4.7.3按需引入样式和修改全局主题
项目版本:
react 17.0.1
less 3.12.2
antd 4.7.3
一定要安装 babel-plugin-import
yarn add less less-loader antd babel-plugin-import
或者
npm install antd -D
npm install less-loader less babel-plugin-import -S
按照antd官方的配置不能起到相应效果,所以自己琢磨琢磨,查查资料
0. 配置webpack.config.js文件的less,修改成如下这样:
![c558cc6158fb7a1e02a5cfad89753f38.png](https://i-blog.csdnimg.cn/blog_migrate/71a2c31332a7552282979390ada0e085.jpeg)
- 修改下面这个地方,配置less-loader
![d08c97cc3217fd557d6951e76aea8982.png](https://i-blog.csdnimg.cn/blog_migrate/67b212acb4e86f7c654593063eafd659.jpeg)
3. 在这里配置全局样式, 搜preProcessor,匹配下面的代码
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true
}
modifyVars:{} 这个对象里边配置详细的样式
详细具体的配置点击下面的链接很详细的配置
![8c503b14db90866148b63c4cfc4a8cdd.png](https://i-blog.csdnimg.cn/blog_migrate/dc5c8ee9ecbd927f743fb6581e6c0201.png)
![dd954d56116be3b0783016f8f9ec42ff.png](https://i-blog.csdnimg.cn/blog_migrate/a0a8fedaed95b3ffadc3e5cc0cdc8db6.jpeg)
4. 在plugins中配置如下(搜plugins):
["import", {libraryName:"antd",style: true}],
style: true 解析less
![8bcf6bdfc12583ed9a1ea19c061b60ca.png](https://i-blog.csdnimg.cn/blog_migrate/ca27234de5e635ed16ea734aa91de6b9.jpeg)
5. 其他地方不用在配置其他样式文件,可以直接写less了,但是最好使用*.module.less,避免样式污染
focusdroid:React(或使用TS)中样式混乱解决方案 *.module.lesszhuanlan.zhihu.com![5f4ec907cf3d14b6f1f6a3453937176e.png](https://i-blog.csdnimg.cn/blog_migrate/d6dc4d014306a56a03f7c32a568d0282.jpeg)
![8ae3db6153453fc62a098b16b256f280.png](https://i-blog.csdnimg.cn/blog_migrate/4fb907340d8610a18adc62ad90539813.png)
警告信息:
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of
Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
解决办法,根目录下去掉 <React.StrictMode> </React.StrictMode>这组标签
按照antd的官网配置之后不能实现效果,不知道是不是我的姿势不对,很疑惑?之后自己琢磨和查资料实现了,没用官网的那种方法,以上请参考