antd 定制化的问题

Question

1.我的antd js,css资源都是通过在index.html 外链形式引入的。这样为了节约打包时间。
2.我想修改antd的默认样式，比如字体大小。看了官网的说明。准备采用 less文件覆盖的方式。

3.问题：我的less通过less-loader css-loader?modules编译。因为用了modules。所以打包出来的都加了hash.连antd.less也加了。导致整个antd样式没法用。请问该怎么解决呢？

Answer 1

配置2个 less-loader。
1个处理 antd 的 less，不加 css module。
一个处理自己的 less，加 css module。
webpack 写法不一，供参考。

     {
        test: /\.less$/,
        include: /node_modules\/antd/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: {modules: false} },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                // require('autoprefixer')()
              ]
            },
          },
          'less-loader'
        ]
      },
      {
        test: /\.less$/,
        exclude: /node_modules\/antd/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: {modules: true} },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                // require('autoprefixer')()
              ]
            },
          },
          'less-loader'
        ]
      },

Answer 2

antd提供了theme.你可以任意修改你想要的样式。请参考