create-react-app 按需加载antd出错问题解决

按需引入antd报错问题
1.使用create-react-app工具创建了一个项目
create-react-app antd-demo
2.安装babel-plugin-import
npm install babel-plugin-import --dev
3.按需引用antd
在App.js里面引入，
import { Button } from 'antd';
package.json里面配置babel

"babel": {
   "plugins": [
     [
       "import",
       {
         "libraryName": "antd",
         "style": true
       }
     ]
   ]
 },

最后项目启动报错，报错信息如下
./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 E:\webstrom\migu\ngoc\web\react-interface\react-interface-cli\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

解决办法：把最后的"style"：true改为"style":"css"就可以了

这里的style可以为true或者‘css’，但是不知道为什么使用true就报错，

[“import”, { “libraryName”: “antd”, “style”: “css” }]
转载自：https://www.cnblogs.com/heihei-haha/p/9041093.html 感谢作者;-)

2018-9-19 16:13补充：
babel-plugin-import插件配置中：
使用 { “libraryName”: “antd” } 只会引入对应的js文件，无样式文件
使用 { “libraryName”: “antd” , “style” : “css” } 引入对用组件的js文件和编译之后的css文件
使用{ “libraryName”: “antd”, “style” : true } 会引入组件的js文件和动态编译后的css文件，这里通常配合自定义主题来使用！

antd自定义主题：

在webpack.config.dev.js中，引入less-loader的地方，options中添加代码如下

              {
                loader: require.resolve('less-loader'),
                options:{
                  javascriptEnabled: true,
                  modifyVars:{
                    'primary-color': 'red',
                  }
                },

详见：https://www.npmjs.com/package/babel-plugin-import