脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → create-react-app antd按需加载

create-react-app使用antd按需加载的样式无效问题的解决

 更新时间：2019年02月26日 09:11:40   作者：追风的云月  
这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

官网给出的按需加载解决方案，先安装 babel-plugin-import

因为antd默认引入样式是less，所以需要手动配置为CSS，配置方法如下：

第一种方法：在package.json中配置，这种方法成功的前提是webpack里query下配置babelrc：true， 这样就会使用babelrc文件中的配置

"babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   [
    "import",
    {
     "libraryName": "antd",
     "style": "css"
    }
   ]
  ]
 }

第二种方法：在webpack.config.dev和webpack.config.prod中配置：

module: {
  strictExportPresence: true,
  rules: [
   {
    oneOf: [
     // Process JS with Babel.
     {
      test: /\.(js|jsx|mjs)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        plugins: [
          // 引入样式为 css
          // style为true 则默认引入less
          ['import', { libraryName: 'antd', style: 'css' }],
        ]
      }
     }
   ]
  }
 ]
}

至此，就算是成功完成按需加载引入样式了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React-Hook中使用useEffect清除定时器的实现方法

    React-Hook中使用useEffect清除定时器的实现方法

    这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法，还有如何使用他清除定时器，需要的朋友可以参考下
    2022-11-11
  • 浅谈react useEffect闭包的坑

    浅谈react useEffect闭包的坑

    笔者最近用react useEffect闭包，其中踩到了一些坑在此与大家分享一下。需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • React钩子函数之useDeferredValue的基本使用示例详解

    React钩子函数之useDeferredValue的基本使用示例详解

    useDeferredValue是React 18中非常有用的一个钩子函数，它可以帮助我们优化渲染性能，并让UI更加流畅，如果你还没有尝试过它，不妨在你的下一个React项目中试一试，这篇文章主要介绍了React钩子函数之useDeferredValue的基本使用,需要的朋友可以参考下
    2023-08-08
  • React新文档切记不要滥用effect

    React新文档切记不要滥用effect

    这篇文章主要为大家介绍了React新文档滥用effect出现的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React报错解决之ref返回undefined或null

    React报错解决之ref返回undefined或null

    最近使用react做个滚动监听获取更多数据效果,当想获取dom时发现怎么也获取不到,下面这篇文章主要给大家介绍了关于React报错解决之ref返回undefined或null的相关资料,需要的朋友可以参考下
    2022-08-08
  • 关于react useState更新异步问题

    关于react useState更新异步问题

    这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    2022-08-08
  • react中hook介绍以及使用教程

    react中hook介绍以及使用教程

    这篇文章主要给大家介绍了关于react中hook及使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • React中的Refs属性你来了解吗

    React中的Refs属性你来了解吗

    这篇文章主要为大家详细介绍了的React Refs属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • 解决React报错Property 'value' does not exist on type EventTarget

    解决React报错Property 'value' does not exist on 

    这篇文章主要为大家介绍了React报错Property 'value' does not exist on type EventTarget的解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 如何应用 SOLID 原则在 React 中整理代码之开闭原则

    如何应用 SOLID 原则在 React 中整理代码之开闭原则

    React 不是面向对象，但这些原则背后的主要思想可能是有帮助的，在本文中，我将尝试演示如何应用这些原则来编写更好的代码，对React SOLID原则开闭原则相关知识感兴趣的朋友一起看看吧
    2022-07-07

最新评论