react antd样式按需加载配置以及与css modules模块化的冲突问题

最新推荐文章于 2025-05-15 23:01:51 发布

weixin_30522095

最新推荐文章于 2025-05-15 23:01:51 发布

阅读量959

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack json ViewUI

原文链接：http://www.cnblogs.com/leyi/p/10985913.html

本文详细介绍了如何在React项目中使用create-react-app脚手架结合Antd实现组件样式按需加载，并解决与CSS模块化的冲突问题。通过配置babel-plugin-import插件，实现Antd组件的轻量化加载，同时介绍如何通过修改文件后缀名来区分模块化样式，确保项目的高效运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过create-react-app脚手架生成一个项目
然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来，
方便自己手工增减，暴露出来的配置文件在app/config下面。

1、antd样式按需加载

用到babel-plugin-import bebel插件
直接在package.json里面添加配置就可以按需加载了：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }
  
现在使用antd组件就不用引用样式了
(官网上是推荐使用react-app-rewired(customize-cra)模块，
自己建一个config-overrides.js对包里的webpack配置进行覆盖,感觉多了一个配置不怎么好。）


2、antd设置按需加载样式后和css模块化的冲突问题

其实webpack.config.js里默认已经写好了配置,即匹配cssModuleRegex的loader设置，
只需要将我们需要模块化的样式文件后缀进行修改

文件后缀修改成xxx.module.css即可。


最终项目里引用样式：

入口文件引用全局公共自定义样式=>import './css/common.css'; 
// common.css文件
.ml20{margin-left: 20px}

// jsx文件里使用
<span className=“ml20”>1</span>

页面或者组件中引用模块化私有样式=>import style from './xxx.module.css'

// xxx.module.css文件
.red{color: red;}

// jsx里使用
<span className=“ml20”>1</span>
<span className={style.red}>2</span>

转载于:https://www.cnblogs.com/leyi/p/10985913.html