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


Posted in Javascript onFebruary 26, 2019

官网给出的按需加载解决方案,先安装 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' }],
        ]
      }
     }
   ]
  }
 ]
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
分类解析jQuery选择器
Nov 23 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 #Javascript
JS实现的合并两个有序链表算法示例
Feb 25 #Javascript
JS实现判断有效的数独算法示例
Feb 25 #Javascript
js实现通过开始结束控制的计时器
Feb 25 #Javascript
js实现倒计时器自定义时间和暂停
Feb 25 #Javascript
JS module的导出和导入的实现代码
Feb 25 #Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 #Javascript
You might like
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python实现数据库编程方法详解
2015/06/09 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python 解压pkl文件的方法
2018/10/25 Python
pytorch permute维度转换方法
2018/12/14 Python
python实现图书借阅系统
2019/02/20 Python
python实现接口并发测试脚本
2019/06/25 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
使用K.function()调试keras操作
2020/06/17 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
Django 实现图片上传和下载功能
2020/12/31 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
天网面试题
2013/04/07 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
资料员的岗位职责
2013/11/20 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python