CRA版本為3.0.1。
eject出來之后只有一個webpack.config.js。不再區分為dev和prod兩個配置文件。
首先安裝 antd,less,less-loader
npm install antd
npm install less less-loader
eject CRA新建的項目
config目錄下的文件如下：
image.png
修改webpack.config.js
首先配置less module
在cssRegex和sassRegex附近(line 42左右)添加如下代碼
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; 再找到使用cssRegex的代碼位置(line 460左右）添加如下代碼
{ test: lessRegex, // exclude: lessModuleRegex, exclude: /node_modules/, use: getStyleLoaders( { modules: true, importLoaders: 3, // javascriptEnabled: true, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment }, "less-loader" ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true }, { test: lessRegex, // exclude: lessModuleRegex, include: /node_modules/, use: getStyleLoaders( { importLoaders: 3, // javascriptEnabled: true, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment }, "less-loader" ), }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent }, "less-loader" ) }, 注意上面的less-loader配置了2次，第一次主要是為了exclude antd。從而可以正確加載antd的樣式。
修改getStyleLoaders方法
當前版本CRA生成的webpack.config.js文件加載css loader等都是通過getStyleLoaders方法（line74左右）實現的。但這個方法有點小問題，像上面那樣配置了第二個參數“less-loader”,並沒有被該方法使用。所以如下修改改方法
const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve('style-loader'), isEnvProduction && { loader: MiniCssExtractPlugin.loader, options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {}, }, { loader: require.resolve('css-loader'), options: cssOptions, }, { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), // Adds PostCSS Normalize as the reset css with default options, // so that it honors browserslist config in package.json // which in turn let's users customize the target behavior as per their needs. postcssNormalize(), ], sourceMap: isEnvProduction && shouldUseSourceMap, }, }, ].filter(Boolean); if (preProcessor) { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, modifyVars: { '@primary-color': '#2577E0' }, javascriptEnabled: true, }, }); } return loaders; }; 增加了最后的if (preprocessor)的判斷，觸發less-loader及antd修改主題的相關配置。
到這里webpack的相關配置修改就完成了。
最后：
Antd的按需加載
npm install babel-plugin-import 先安裝babel插件
然后在項目的根目錄下（就是和package.json相同的層級）新建文件babel.config.js，里面的內容如下
module.exports = { plugins: [ ["import", { libraryName: "antd", style: true}] // `style: true` 會加載 less 文件 ] }; 以上，Create-React-App新建項目，引入antd及按需加載，使用less作為業務代碼的樣式文件，並實現css模塊化配置完成。
作者：四環霉素
鏈接：https://www.jianshu.com/p/6dcc754371cf
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。