Как поместить css в разные теги style по условию?

Question

[Николай Васильев]

Добрый день. Помогите, пожалуйста, сконфигурировать вебпак.

Что есть: множество файлов вида "styles.css", "styles.dark.css", располагающихся в директориях реактовых компонентов.
Что хочу: два тега <style>, в первом должны быть собраны все обычные стили, во втором - все темные. По нажатию кнопки отключается или включается "темная" таблица стилей (document.styleSheets[1].disabled = true).

Сейчас правила упрощенно выглядят так:

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

В первом правиле параметр singleton: true делает именно то, что мне нужно - собирает все стили, соответствующие условию, в один тег style. Но если указать этот параметр и во втором правиле, то все стили, подходящие под второе условие, соберутся в тот же первый тег, а не в отдельный.

Что можно сделать?

Answer 1

[Николай Васильев]

Полагаю, сделать так, как я хочу, невозможно. Что бы стили складывались в два разных тега style, нужно два экземпляра style-loader, у каждого из которых будет параметр singleton: true. Но для лоадеров, в отличии от плагинов, не предусмотрено создание экземпляров через new. Единственное, что придумал, - создать копию модуля (node_modules/style-loader -> node_modules/style-loader-a) и обращаться во втором правиле к ней.

Пока что отказался от внутренней CSS в пользу внешней. Тут все проще - заместо style-loader можно использовать extract-text-webpack-plugin, указав в разных правилах разные его экземпляры.