用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的  babel-plugin-import  ( 一个用于按需加载组件代码和样式的 babel 插件)

虽然项目一开始是用create-react-app创建,但是之后有 yarn run eject,将所有内建的配置暴露出来,这样可以自由重新配置webpack,至于为什么要这样,是因为目前create-react-app初始化的项目

并不支持less文件,但是它已经把webpack的一些基础配置也封装起来了。而antd是基于less开发的,为了更灵活地使用antd甚至是改动一下antd中的less源码,很有必要重新配置一下webpack.

yarn run eject之后,为了实现按需加载,我重新配置了webpack.config.dev.js 当然webpack.config.prod.js也一样

其实只是一个简单的改动:在babel-loader之前插入了一段简单的配置。如下

           // Process JS with Babel.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
 7               plugins:[
 8                   ['import',{libraryName:'antd', style:true}]
 9               ],
               // This is a feature of `babel-loader` for webpack (not Babel itself).
               // It enables caching results in ./node_modules/.cache/babel-loader/
               // directory for faster rebuilds.
               cacheDirectory: true,
             },
           },

然后 yarn run start   编译完成后  发现报错了。错误如下:

Failed to compile
./node_modules/antd/lib/button/style/index.less
Module build failed: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in C:\Users\HP\Desktop\react-antD\react-antd\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
This error occurred during the build time and cannot be dismissed.

如何解决这个问题呢?报错信息给了一个链接  https://github.com/ant-design/ant-motion/issues/44

于是打开项目package.json发现less版本是^3.0.4

目前来看,解决方案:将less版本降到3.0以下 比如安装 2.7.3版本。

两种方式:

1.yarn add less@^2.7.3

2.打开项目的package.json 找到dependencies下面的less 将其版本改为  "2.7.3"   然后 yarn install

 

												

babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()的更多相关文章

  1. antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案

    报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...

  2. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  3. 配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp

    配置 Windows 下的 nodejs C++ 模块编译环境 根据 node-gyp 指示的 Windows 编译环境说明, 简单一句话就是 "Python + VC++ 编译环境&quo ...

  4. Android 引入外部模块编译选择

    /********************************************************************************* * Android 引入外部模块编 ...

  5. 按需引入antd报错问题

    1.使用create-react-app工具创建了一个项目 create-react-app antd-demo 2.安装babel-plugin-import npm install babel-p ...

  6. 按需引入antd

    使用create-react-app创建项目的时候,官网推荐使用 babel-plugin-import 对antd 按需引入文件.但是配置文件在项目里没有. 可以直接在package.json里加上 ...

  7. 配置 Windows 下的 nodejs C++ 模块编译环境

    根据 node-gyp 指示的 Windows 编译环境说明, 简单一句话就是 "Python + VC++ 编译环境". 所有需要的安装文件, 我都下载好放到百度云盘了: nod ...

  8. create-react-app:reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置

    create-react-app:eject和不eject(使用react-app-rewired)这2种情况下的antd组件按需引入配置: 不eject(使用react-app-rewired)配置 ...

  9. webpack配置babel篇

    babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...

随机推荐

  1. delphi操作sqlite3

    Delphi SQLite 简明无废话上手指南SQLite下载http://www.sqlite.org/download.html SQLite FAQhttp://www.sqlitecn.org ...

  2. 17.4-uC/OS-III消息管理(任务消息队列使用)

    任务消息队列跟任务信号量一样,均隶属于某一个特定任务, 不需单独创建,任务在则在, 只有该任务才可以接收这个任务消息队列的消息,其他任务只能给这个任务消息队列发送消息, 却不能接收.任务消息队列与(普 ...

  3. repo常用命令及常见问题汇总

    1.执行repo命令的时候,总是显示“project xx no found” 解决: (1)先执行“repo forall -c pwd” 显示所有project的路径,按照这个来写project参 ...

  4. python_字符串的格式化输出

    name = input("Name:")age = int(input("Age:")) input: 输入的内容默认为字符串格式job = input(&q ...

  5. Git 在 windows 上面的安装

    参考博客: https://blog.csdn.net/xiezhongyuan07/article/details/79411299 将该作者的文章搬过来, 大家可以直接看上面的原文章. 下面是拷贝 ...

  6. python队列基本使用

    Python queue队列 作用: 解耦:使程序直接实现松耦合,修改一个函数,不会有串联关系. 提高处理效率:FIFO = 现进先出,LIFO = 后入先出.   队列: 队列可以并发的派多个线程, ...

  7. C#设计模式(10)——组合模式(Composite Pattern)(转)

    一.引言 在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...

  8. fpga板制作调试过程记录

    2010-09-11 22:49:00 昨天淘宝准备买块fpga核心板学习,为了练习焊接,我让老板给我散料及pcb板自己焊接. 一,在物料到之前的准备: 我先设计了一下焊接测试计划 1,检查电路板:特 ...

  9. Java 实现追加excle文件内容

    Java 实现追加excle文件内容 一.示例一:excle(.xlsx) //jar import java.io.BufferedReader; import java.io.File; impo ...

  10. layer(jQuery弹出层插件)

    弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认 ...