React学習問題要約(1)-antdとcss-moduleの競合の解決

いずれのフレームワークを使用しても、コンポーネントライブラリはさまざまな穴にぶつかる準備ができています.私たちは気持ちがいい.この文章は主に「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]'

この2つのオプション.excludeを使用して、excludeで指定したディレクトリのリソースを除外します.node-modulesでcss-moduleを閉じ、自分で書いたsrcの下のcssでcss-moduleを開きます.