react antd 配置

记录 使用antd 和create-react-app

create-react-app react-raise
cd react-raise
 yarn eject
yarn add antd
yarn add less less-loader
yarn add babel-plugin-import

 

配置插件

package.json 

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

webpack.config.json  添加less-loader  在sass-loader 后面添加

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

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

配置自定义的antd样式 找到下面注释部分

if (preProcessor) {
 
      let loader=  {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
        },
      };
      if (preProcessor === "less-loader") {
        loader.options.modifyVars = {
          'primary-color': '#f9c700'
        }
        loader.options.javascriptEnabled = true
      }
      loaders.push({
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },loader);
      /*
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
          },
        }
      );*/
    }
    return loaders;
  };