reactjs - Ant Design & Webpack 不加载 css

Question

我有一个使用 Antd 和 webpack 的 React 项目，因为我想使用 css 模块，但不幸的是，这会影响 Antd，我无法理解如何解决这个问题。

在我的 webpack 配置中，我有以下加载器:

  {
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: "[name]__[local]___[hash:base64:5]"
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },

我可以确认这适用于我自己的样式元素，但是 Antd 组件没有样式。

在我的 App.js 中，我正在导入 antd.css 文件，但是当捆绑时，它将 css 模块应用于 antd.css。这显然会导致问题，因为 Antd 组件尚未更改其类名。

谁能指导我如何解决这个问题？

Answer 1

你可以通过添加 @import '~antd/dist/antd.css' 来解决这个问题；到你的CSS文件。但是，我也在通过更改 webpack.config 来寻找解决方案