Как подружить модули с глобальным css?

Question

[Kappy]

Добрый день .

Решил подружить module css с библиотечкой ant design.
Раньше использовал create - react - app. Теперь решил потихоньку углубиться в знания сборщиков.
Настроил весь проект, но есть одна проблема, стили интегрируются по разному.
Используя style loader и css loader, в следующем контексте

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

Вроде бы классы устанавливаются, но без стилей, однако все работает, если убрать следующий флаг в конфиге
options: { modules: true }
Но без модуля

Answer 1

[Kappy]

Пока писал, решил проблему

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,
                        },
                    },
                ],
            },

Может кому то поможет

Answer 2

[Дмитрий Беляев]

Модули по умолчанию, при запросе с ?no-module - без модулей

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

Без модулей по умолчанию, при запросе с ?module - модуль

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