使用任何一個框架，或者元件庫都要做好碰到各種各樣坑的準備。咱們心態要好。這篇文章主要講解【如何解決antd與css-module衝突】這個小小坑。

在webpack.config.dev中的module分別對依賴和src進行配置即可：

 {
            test: /\.css$/,
            exclude:[/node_modules/],
            use: [
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'
 
),
                options: {
                  importLoaders: 1,
                  modules: true, // 新增對css modules的支援
                  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'
                    })
                  ]
                }
              }
            ]
          },
          {
            test: /\.css$/,
            exclude:[/src/],
            use: [
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  // modules: true, // 新增對css modules的支援
                  // 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'
                    })
                  ]
                }
              }
            ]
          },

關鍵在於配置

 modules: true, // 新增對css modules的支援
 localIdentName: '[name]__[local]__[hash:base64:5]'

這兩個選項。使用exclude排除exclude中指定目錄的資源。在node-modules中關閉css-module，在我們自己寫的src下的css開啟css-module