antd mysql_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' }],

]

}

]

}

]

}

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

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

antd mysql_create-react-app使用antd按需加载的样式无效问题的解决相关推荐

快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
On-Demand Resources Guide中文版（按需加载资源--上）
本文翻译由唧唧歪歪翻译自Apple文档 On-Demand Resources Guide On-Demand Resources Guide中文版(按需加载资源--下)包含管理按需加载资源.调试以及 ...
React之antd按需加载
虽然antd官网有提供按需加载的方法: 但这种方法需要执行eject命令,而eject是不可逆的,会更改package文件,并且将所有的依赖都暴露在外面.我将自己的项目eject后,找不到packag ...
引入antd组件样式_create-react-app 实现 antd 的按需加载
按需加载 antd 的实现方式: 用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下: 首先运行 npm run eject 暴露出 ...
create-react-app中配置antd按需加载、less、proxy、路径别名
配置antd.less.路径别名第一步 // 安装一下需要的插 yarn add antd react-app-rewired customize-cra babel-plugin-import l ...
antd 按需加载，antd定制主题，antd上传组件，在线换肤
antd 按需加载组件,antd按需加载样式使用 babel-plugin-import,babel模块化导入插件,兼容antd,antd-mobile,lodash等库配置:{ "li ...
react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...

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

antd mysql_create-react-app使用antd按需加载的样式无效问题的解决相关推荐

最新文章

热门文章