How to solve the problem that create-react-app uses antd to load on demand style is invalid

Most people don't understand the knowledge points of this article, so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article.

The on-demand loading solution given by the official website, first install babel-plugin-import

Because antd is less by default, it needs to be manually configured as CSS. The configuration method is as follows:

The first method: configure in package.json. The premise for success of this method is to configure babelrc: true under query in webpack, so that the configuration in babelrc file will be used.

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

The second method: configure webpack.config.dev and 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: [ The requested URL//was not found on this server. // style is true, less is introduced by default ['import', { libraryName: 'antd', style: 'css' }], ] } } ] } ]} The above is about the content of this article, I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to the industry information channel.