How to make friends modules with global css?

Question

typescript

Good afternoon .
I decided to make module css friends with the ant design library.
Used to use create - react - app. Now I decided to slowly delve into the knowledge of the collectors.
I set up the whole project, but there is one problem, the styles are integrated in different ways.
Using style loader and css loader, in the following context

{
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader', options: { modules: true } },
                ],
            },

It seems that classes are installed, but without styles, but everything works if you remove the following flag in the config But without a module
options: { modules: true }

Answer 1

While writing, I solved the problem

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

 {
                test: cssRegex,
                exclude: cssModuleRegex,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
            },
            {
                test: cssModuleRegex,
                use: [{ loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },

Maybe someone will help

Answer 2

Default modules, when requested with ?no-module - no modules

{
  test:  /\.css$/,
  oneOf: [{
    resourceQuery: /no-module/,
    use: [{loader: 'style-loader'}, {loader: 'css-loader'}]
  }, {
    use: [{loader: 'style-loader'}, {loader: 'css-loader', options: {modules: true}}]
  }]
}

Without default modules, when requested with ?module - module

{
  test:  /\.css$/,
  oneOf: [{
    resourceQuery: /module/,
    use: [{loader: 'style-loader'}, {loader: 'css-loader', options: {modules: true}}]
  }, {
    use: [{loader: 'style-loader'}, {loader: 'css-loader'}]
  }]
}