create-react-app 2.0中使用antd(eject)

早些时候CRA(create-react-app)升级到2.0.3的时候, react-app-rewired没有跟着升级, 导致项目无法启动, 于是乎直接eject 开始改造项目.查看版本> create-react-app –version2.0.3创建项目create-react-app my-projectcd my-projectyarn eject # 输入 y目前为止项目目录结构, 忽略node_modules这个黑洞├── README.md├── config│   ├── env.js│   ├── jest│   │   ├── cssTransform.js│   │   └── fileTransform.js│   ├── paths.js│   ├── webpack.config.js│   └── webpackDevServer.config.js├── package.json├── public│   ├── favicon.ico│   ├── index.html│   └── manifest.json├── scripts│   ├── build.js│   ├── start.js│   └── test.js├── src│   ├── App.css│   ├── App.js│   ├── App.test.js│   ├── index.css│   ├── index.js│   ├── logo.svg│   └── serviceWorker.js└── yarn.lock安装依赖yarn add antdyarn add babel-plugin-import less less-loader @babel/plugin-proposal-decorators -DCRA eject之后package.json里面没有区分devDependencies 和 dependencies, 但是不影响使用因为antd是使用的less, CRA默认不支持, 所以需要改下默认的webpack配置, config/webpack.config.js首先修改babel配置个人习惯使用babelrc, 所以把babel-loader options中babelrc的值改为true, 增加.babelrc文件{ “presets”: [ “react-app” ], “plugins”: [ [ “import”, { “libraryName”: “antd”, “libraryDirectory”: “lib”, “style”: true }, “ant” ], [ “@babel/plugin-proposal-decorators”, // 启用装饰器 { “legacy”: true } ] ]}参照默认的sass配置, 增加less配置const sassRegex = /.(scss|sass)$/;const sassModuleRegex = /.module.(scss|sass)$/;const lessRegex = /.less$/;const lessModuleRegex = /.module.less$/;在module>rules中添加规则// sass rule//… { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap }, ’less-loader’, { javascriptEnabled: true } ), sideEffects: true }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent }, ’less-loader’, { javascriptEnabled: true } ) }// file loader至此基本项目虽然已经基本完成, 但是如果你是使用less版本比较高, 项目是无法运行的参考issue需要改造getStyleLoaders函数, 增加第三个参数otherConfig, 就是上面代码中的 javascriptEnabled: trueconst getStyleLoaders = (cssOptions, preProcessor, otherConfig) => { const loaders = [ isEnvDevelopment && require.resolve(‘style-loader’), isEnvProduction && { loader: MiniCssExtractPlugin.loader, options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: ‘../../’ } : undefined) }, { loader: require.resolve(‘css-loader’), options: cssOptions }, { loader: require.resolve(‘postcss-loader’), options: { ident: ‘postcss’, plugins: () => [ require(‘postcss-flexbugs-fixes’), require(‘postcss-preset-env’)({ autoprefixer: { flexbox: ’no-2009’ }, stage: 3 }) ], sourceMap: isEnvProduction && shouldUseSourceMap } } ].filter(Boolean); if (preProcessor) { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, …otherConfig } }); } return loaders; };这样修改之后, 自定义主题modifyVars也可以写在otherConfig中, 一举两得, 不多赘述.至此项目????