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


    通过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>
    

      

  • 相关阅读:
    ngxin常用配置--作为web服务端
    百度学习笔记---查询数据库
    python开发
    C 语言学习——递归
    C 语言学习——强制类型转换
    C 语言学习——头文件
    C 语言学习——printf()输出格式
    一个简单的python web应用部署 nginx + uwsgi
    C 语言学习——字符串
    C 语言学习——指针
  • 原文地址:https://www.cnblogs.com/leyi/p/10985913.html
走看看 - 开发者的网上家园