react中使用antd-mobile时开启css modolues 样式失效问题.

Question

如题,
使用了babel-plugin-import 按需加载
package.json 中配置:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]
  },

在webpack.config.js 中配置 css modules:

test: /\.css$/,
exclude: /node_modules|antd-mobile\.css/,//设置无效
use: [
  require.resolve('style-loader'),
  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
      modules:true,
      localIdentName:'[name]-[local]-[hash:base64:8]',
    },
  },
]

设置:exclude: /node_modules|antd-mobile.css/
排除 /node_modules/ 也无效

请问 如何解决呢??

Answer 1

      {
        test: /\.css$/,
        include: /node_modules\/antd/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              modules:false
            },
          },
        ]
      },
      {
        test: /\.css$/,
        exclude: /node_modules\/antd/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules:true,
              localIdentName:'[name]-[local]-[hash:base64:8]',
            },
          },
        ]
      },

Answer 2

我用的是react-app-rewired，

config.module.rules[2].oneOf.unshift(
        {
            test: /\.css$/,
            include: /node_modules[\\/]antd-mobile/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        modules:false
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        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: /node_modules[\\/]antd-mobile/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        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',
                            }),
                        ],
                    },
                },
            ]
        },

    );

这样还是冲突