create-react-app，实现暴露配置，antd按需加载，less引入，主题定制

最新推荐文章于 2021-10-14 15:07:39 发布

金翅

最新推荐文章于 2021-10-14 15:07:39 发布

阅读量525

点赞数 1

分类专栏： react 文章标签： reactjs less js yarn webpack

本文链接：https://blog.csdn.net/qq_37103514/article/details/103615996

版权

react 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

第一步暴露配置：

$ yarn eject

第二步实现antd按需加载:

$ yarn add babel-plugin-import

修改package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

第三步less引入：

$ yarn add less less-loader

修改config目录下webpack.config.js文件
其实就是复制sass的配置修改成less
复制并添加**+**后面的内容

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 + const lessRegex = /\.less$/;
 + const lessModuleRegex = /\.module\.less$/;

            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
           + {
           +  test: lessRegex,
           +  exclude: lessModuleRegex,
           +  use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
           + },
           + // Adds support for CSS Modules, but using SASS
           + // using the extension .module.scss or .module.sass
           + {
           +  test: lessModuleRegex,
           +  use: getStyleLoaders(
           + {
           +         importLoaders: 2,
           +        modules: true,
           +        getLocalIdent: getCSSModuleLocalIdent,
           + },
           +     'less-loader'
           + ),
           + },

第四步主题定制：
同样是config目录下webpack.config.js文件

//if (preProcessor) {
//   ...
// }
+if (preProcessor) {
+     let loader = require.resolve(preProcessor)
+      if (preProcessor === "less-loader") {
+        loader = {
+          loader,
+          options: {
+            modifyVars: { //自定义主题
+              'primary-color':' #1890ff ',
+            },
+            javascriptEnabled: true,
+          }
+        }
+      }
+      loaders.push(loader);
+   }
    return loaders;

修改第二步package.json下
注意：配置文件有注释可能会报错所有大家复制的时候记得把注释去掉

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true //修改位置 
        }
      ]
    ]
  }

问题：在使用yarn eject暴露webpack配置后，再次使用yarn start 不能启动项目，显示缺少某包
解决：删除node-modules，使用npm或cnpm重新npm install