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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 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
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
Python日期操作学习笔记
2008/10/07 Python
python web框架学习笔记
2016/05/03 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python设计密码强度校验程序
2020/07/30 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
初中生学习的自我评价
2013/11/14 职场文书
邮政员工辞职信
2014/01/16 职场文书
收银员岗位职责
2014/02/07 职场文书
开工仪式策划方案
2014/05/23 职场文书
教研处工作方案
2014/05/26 职场文书
基层党支部承诺书
2015/04/30 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python