第一篇帖子，个人练习项目遇到更改antd主题报错，之前按照antd官网的方法。用babel-plugin-import和 react-app-rewire按需加载。

刚开始按照官网https://ant.design/docs/react/customize-theme-cn  的步骤一步一步，最后发现json报错。在网上浏览了好久（大概两天时间），才知道是版本问题，得到了如下方法。

首先 下载依赖库

npm install --save-dev less@2.7.3 less-loader@4.1.0

这里强调一下，less2.7.3以上容易报错，我们下载2.7.3版本，搭配less-loader4.1.0版本。而之前的babel-plugin-import和react-app-rewire我也都做了降版本。分别是

"babel-plugin-import": "^1.7.0","react-app-rewired": "^1.5.2"
还不够，低版本的react-app-rewired需要低版本的react-scripts才会更好的支持，这里我们也要在json文件里修改react-scripts的版本 改成1.1.4。
!!!!特别强调，如果在json文件里改的版本，别忘了npm install。

配置: config-overrides.js (在根目录下创建

代码如下
  1 const {injectBabelPlugin, getLoader} = require('react-app-rewired');
  2 
  3 const fileLoaderMatcher = function (rule) {
  4   return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
  5 }
  6 
  7 module.exports = function override(config, env) {
  8   // babel-plugin-import
  9   config = injectBabelPlugin(['import', {
 10     libraryName: 'antd-mobile',
 11     //style: 'css',
 12     style: true, // use less for customized theme
 13   }], config);
 14 
 15   // customize theme
 16   config.module.rules[1].oneOf.unshift(
 17     {
 18       test: /\.less$/,
 19       use: [
 20         require.resolve('style-loader'),
 21         require.resolve('css-loader'),
 22         {
 23           loader: require.resolve('postcss-loader'),
 24           options: {
 25             // Necessary for external CSS imports to work
 26             // https://github.com/facebookincubator/create-react-app/issues/2677
 27             ident: 'postcss',
 28             plugins: () => [
 29               require('postcss-flexbugs-fixes'),
 30               autoprefixer({
 31                 browsers: [
 32                   '>1%',
 33                   'last 4 versions',
 34                   'Firefox ESR',
 35                   'not ie < 9', // React doesn't support IE8 anyway
 36                 ],
 37                 flexbox: 'no-2009',
 38               }),
 39             ],
 40           },
 41         },
 42         {
 43           loader: require.resolve('less-loader'),
 44           options: {
 45             // theme vars, also can use theme.js instead of this.
 46             modifyVars: {
 47               "@brand-primary": "#1cae82", // 正常
 48               "@brand-primary-tap": "#1DA57A", // 按下
 49             },
 50           },
 51         },
 52       ]
 53     }
 54   );
 55 
 56   // css-modules
 57   config.module.rules[1].oneOf.unshift(
 58     {
 59       test: /\.css$/,
 60       exclude: /node_modules|antd-mobile\.css/,
 61       use: [
 62         require.resolve('style-loader'),
 63         {
 64           loader: require.resolve('css-loader'),
 65           options: {
 66             modules: true,
 67             importLoaders: 1,
 68             localIdentName: '[local]___[hash:base64:5]'
 69           },
 70         },
 71         {
 72           loader: require.resolve('postcss-loader'),
 73           options: {
 74             // Necessary for external CSS imports to work
 75             // https://github.com/facebookincubator/create-react-app/issues/2677
 76             ident: 'postcss',
 77             plugins: () => [
 78               require('postcss-flexbugs-fixes'),
 79               autoprefixer({
 80                 browsers: [
 81                   '>1%',
 82                   'last 4 versions',
 83                   'Firefox ESR',
 84                   'not ie < 9', // React doesn't support IE8 anyway
 85                 ],
 86                 flexbox: 'no-2009',
 87               }),
 88             ],
 89           },
 90         },
 91       ]
 92     }
 93   );
 94 
 95   // file-loader exclude
 96   let l = getLoader(config.module.rules, fileLoaderMatcher);
 97   l.exclude.push(/\.less$/);
 98 
 99   return config;
100 };

 

这种方法是利用rewire插件覆盖配置选项，就不需要我们eject暴露再修改了。以上代码就不做过多解释了。