Webpack: Как использовать CSS-модули и импортировать CSS из сторонних библиотек?

Question

Я использую css-модули в своем реактивном приложении, однако, когда я пытаюсь импортировать внешние файлы в файлы .js, я не могу импортировать их глобально, потому что не могу обернуть их в блок :global, а веб-пакет интерпретирует их как стили предназначен для использования в качестве объектов.

Как импортировать файлы CSS как глобальные CSS из внешних библиотек? Это CSS, который должен соответствовать импортированным плагинам.

например, в src / index.js

import 'draft-js/dist/Draft.css';
//cannot wrap in a :global block since it is imported
import 'react-responsive-carousel/lib/styles/carousel.min.css'; 
// is wrapped in a :global {...} block, so it works
import './styles/app.css'; 

Конфигурация Webpack, от Create-React-App

test: /\.css$/,
loader: [
  require.resolve('style-loader'),
  {
   loader: require.resolve('css-loader'),
   options: {
     importLoaders: 1,
     modules: true,
     minimize: true,
    },
   },
    'postcss-loader'
]

Answer 1

Один из вариантов - иметь два отдельных правила для стилей src и стилей node_modules и установить только modules в значение true в вашей конфигурации src. Это должно выглядеть примерно так (я не проверял это) - важными опциями являются include и exclude и удаление modules из правила, которое применяется к node_modules.

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                modules: true,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
},
{
    test: /\.css$/,
    include: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
}