WebPACKのCSSのモジュラーおよびANT-設計荷重の競合需要

実際には、特定の問題は、私も今日は突然それを記録する必要が振り返ってみると、ない明確な覚えがあった、考えたのは、オンラインの多くの関連例があるディレクトリnode_module内のファイルを除外するために除外を使用することですが、多分それはすべて、時間の経過からです、有効になり、無力、および公式文書をバック噛まないように持っていた、次のように私の解決策はありません

WebPACKの通常のパッケージは、すべてのCSSをまとめてパッケージ化され、CSSの原因グローバル汚染、我々が使用できるモジュラー方法は、実際には、クラス名やID変更するハッシュから借り
webpack.config.jsを

  module: {
    rules: [     
 {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",

        options: {
          // presets: [
          //           //   "env"
          //           // ],
          plugins: [
              [ "import",{libraryName: "antd", style: 'css'}] // antd按需加载
          ]
        },

        exclude: /node_module/
      },
      {//CSS处理
        test: /\.css$/,
        use: ['style-loader', 'css-loader?modules'],
        exclude: /node_modules/,
      },

      {//antd样式处理
        test:/\.css$/,
        exclude:/src/,
        use:[
          { loader: "style-loader",},
          {
            loader: "css-loader",
            options:{
              importLoaders:1
            }
          }
        ]
      },
//其他配置项
       }
    ]

JSファイルは、その後、我々はグローバルな友達にWebPACKのパッケージ後の汚染を心配することなくモジュラーCSSを読み込むことができるようになります

以下のような形

import styles from './myTrip.css';

そして、あなたも幸せアリ・デザインをロードすることができます

import { Pagination } from 'antd';