webpack+react+antd css样式 按需加载 修改主题

antd 的样式使用了less作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整。

1.使用 babel-plugin-import 的 style 配置来引入样式

 {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-typescript', '@babel/preset-react'],
              plugins: [
                [
                  'import',
                  {
                    libraryName: 'antd',
                    style:true
                  },
                ],
              ],
            },
          },

2.less-loader 的 options 属性进行相应配置

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      //主题样式配置
      modifyVars: {
        'primary-color': '#f00',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true, // antd 报错处理
    },
  },
}

完整webpack.common配置

`module.exports = {
  entry: {
    index: [path.resolve(__dirname, 'src/index.tsx')],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[hash].js',
    libraryTarget: 'umd',
  },
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, './src'),
      '@pages': path.resolve(__dirname, './src/pages'),
      '@components': path.resolve(__dirname, './src/components'),
    },

    extensions: ['.js', '.json', '.ts', '.tsx'],
  },

  module: {
    rules: [
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
          },
        ],
        include: [
          path.resolve(__dirname, './src'),
          path.resolve(__dirname, './node_modules/antd'),
          path.resolve(__dirname, './node_modules/@ant-design/'),
        ],
      },
      {
        test: /\.(less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: resourcePath => {
                  //排除 antd样式
                  if (/antd/.test(resourcePath)) {
                    return false
                  }
                  return true
                },
                localIdentName: '[name]_[local]-[hash:base64:5]',
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': '#f00',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
        include: [
          path.resolve(__dirname, './src'),
          path.resolve(__dirname, './node_modules/antd'),
          path.resolve(__dirname, './node_modules/@ant-design/'),
        ],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        use: [
          // 'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-typescript', '@babel/preset-react'],
              plugins: [
                [
                  'import',
                  {
                    libraryName: 'antd',
                    style:true
                  },
                ],
              ],
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '/public/index.html'),
    }),
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`,
    }),
  ],
}
`