全网react+antdUI框架 + 按需引入+自定主题实例Inline JavaScript is not enab

在学习react练习antdUI框架在创建项目遇到的一些问题，在这里做一个记录，如果觉得有帮助的记得点个关注加收藏谢谢了

创建项目

yarn create react-app antd-demo

安装UI框架

yarn add antd

安装按需引入+自定主题的依赖

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

修改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

根目录下创建config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
    }),
    addLessLoader({
            lessOptions:{
                    javascriptEnabled: true,
                    modifyVars: { '@primary-color': 'green' },
            }
    }),
);

备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉

意外情况

做完以上操作在启动项目的时候有可能出现的报错如下

TypeError: this.getOptions is not a function

原因： less-loader安装的版本过高
解决方案： 1.yarn uninstall less-loader
2.yarn add less-loader@5.0.0

Inline JavaScript is not enabled. Is it set in your options?

错误分析
从以上的错误信息我们可以得出错误的关键点：错误信息中我们可以看到错误是在less中的mixin部分编译中出现的。这部分可能不是非常明确那么在看下边的错误提醒Inline JavaScript is not enabled. Is it set in your options?。其实如果使用less比较熟悉可以知道less的mixin实现。这儿其实是antd-mobile包中的inputitem的less样式其中使用了带参mixin。那么使用了mixin在less-loader中需要配置javascriptEnabled: true。

解决方案
使用create-react-app的项目我们是没有办法直接修改webpack.config.js要么你使用eject‘弹射’但是不建议这么做。我们使用的另一个方案就是 react-app-rewired。
使用react-app-rewired需要在config-overrides.js中添加less的配置。添加less配置你可以引入react-app-rewire-less，在config中加入javascriptEnabled: true

总结

在创建项目的时候，如果yarn 安装插件，就一直就这个命令，不要一会用yarn一会用npm或者cnpm命令，这样用的话会出现一些莫名奇怪问题，本人亲测过了，如果觉得有帮助的记得点个关注加收藏，谢谢了

全网react+antdUI框架 + 按需引入+自定主题 实例