Использование css-loader inline с Webpack + React

Question

Я создаю приложение React с помощью Webpack и css-loader w/modules. Я люблю это. Однако большинство моих таблиц стилей очень маленькие, и я хотел бы встроить их в один и тот же JSX-файл в качестве моей разметки и JavaScript.

CSS-загрузчик, я использую прямо сейчас выглядит следующим образом:

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

В моей JSX я import мои отдельные CSS-файлы, как это:

import classNames from 'dashboard.css'; 
... 
<div className={classNames.foo}></div>; 

Это компилируется и переводится в чем-то вроде:

<div class="xs323dsw4sdsw_"></div> 

Но то, что я хотел бы сделать, это нечто более похожее ниже, в то же время сохраняя локальные модули, которые css-loader дает мне:

var classNames = cssLoader` 
    .foo { color: blue; } 
    .bar { color: red; } 
`; 

... 
<div className={classNames.foo}></div>; 

Возможно ли это? Как я могу это сделать без фактического require/import отдельного файла?

Answer 1

Я считаю, что ваша проблема заключается в том, что в вашей текущей конфигурации webpack используются CSS-модули. CSS-модули автоматически переименовывают ваши классы CSS, чтобы избежать столкновений с именами глобального класса.

Исправление:

// remove 'modules' from the end of your css-loader argument 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

// like so 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader") } 

Теперь ваши имена классов будут сохранены. Хотя, я не уверен, почему вы хотите это сделать. Вы разделяете почему?