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

这篇"create-react-app使用antd按需加载的样式无效怎么解决"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"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' }],        ]      }     }   ]  } ]}

以上就是关于"create-react-app使用antd按需加载的样式无效怎么解决"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。