Задать вопрос
@KappyJS
react

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

Добрый день .

Решил подружить module css с библиотечкой ant design.
Раньше использовал create - react - app. Теперь решил потихоньку углубиться в знания сборщиков.
Настроил весь проект, но есть одна проблема, стили интегрируются по разному.
Используя style loader и css loader, в следующем контексте 
{
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader', options: { modules: true } },
                ],
            },

5d3316a5aabca822897524.png

Вроде бы классы устанавливаются, но без стилей, однако все работает, если убрать следующий флаг в конфиге
options: { modules: true }
Но без модуля
5d33172079b6a246594337.png
  • Вопрос задан
  • 116 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@KappyJS Автор вопроса
Пока писал, решил проблему
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,
                        },
                    },
                ],
            },


Может кому то поможет
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347 Куратор тега TypeScript
Crazy on performance...
Модули по умолчанию, при запросе с ?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'}]
  }]
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Вывести запрос на 25 страницу яндекса
24 апр. 2024, в 13:32
300 руб./за проект
Доработка и поддержка сайта агрегатора на Nuxt + Laravel
24 апр. 2024, в 13:19
300000 руб./за проект
Flutter developer
24 апр. 2024, в 13:10
400000 руб./за проект
Ещё заказы