Webpack использует модуль CSS и импортирует весь файл CSS

Question

В моем приложении реакции у меня есть файл конфигурации Webpack , который меняет localIdentName классов CSS в моем приложении. Я использую эту настройку, чтобы я мог импортировать css как модуль в мои реактивные компоненты - эта функция работает нормально. Однако я использую библиотеку js / npm, которая требует, чтобы я импортировал css для компонента (приложение React) напрямую. Я должен использовать import "react-day-picker/lib/style.css"; и не могу импортировать CSS любым другим способом.

Чтобы упростить это, мне нужно (или я бы подумал) добавить еще одно правило в мою конфигурацию Webpack. Мое существующее правило, которое обрабатывает мои css-файлы, приведено ниже:

      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          }
        ]
      },

Я предлагаю, чтобы мне потребовалось новое правило для добавления react-day-picker/lib/style.css, однако добавление такого правила до моего существующего правилакажется, не соответствует файлу (вместо этого мое существующее / оригинальное / первое правило получает react-day-picker/lib/style.css).

      // just for day picker
      {
        test: /\/react-day-picker\/lib\/style\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              // NOTE - no modules: true here!
              localIdentName: '[local]'
            }
          }
        ]
      },

1. Порядок правил в конфигурации Webpack такой же, как Webpack ищет файлы?
2. Как мне изменить мои правила так, чтобы Webpack забрал мой файл (react-day-picker/lib/style.css) и разрешил его импорт?

Answer 1

Обновленный набор правил для загрузки моего существующего css как модулей, но css файл этой библиотеки как обычный импорт css выглядит следующим образом:

      // just for day picker
      {
        test: /react-day-picker.*style\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              localIdentName: '[local]'
            }
          }
        ]
      },
      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          }
        ]
      },

Я полагаю, что мой предыдущий код не работалпотому что мне нужно было правильно исключить каталог node_modules (этого было недостаточно, чтобы просто положиться на свойство теста правила для включения файла css библиотек.) После того как я исключил это правилов папке node_modules, у меня возникли проблемы с включением файла style.css библиотек (это может , потому что я использовал префикс свойства с косой чертой /