nesting - Usar css-loader en línea con Webpack+React

webpack css loader example

Question

Estoy construyendo mi aplicación React con Webpack y css-loader con módulos. Lo amo. Sin embargo, la mayoría de mis hojas de estilo son muy pequeñas y me gustaría alinearlas dentro del mismo archivo JSX que mi marcado y JavaScript.

El cargador de CSS que estoy usando ahora se ve así:

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

En mi JSX, import mis archivos CSS por separado de esta manera:

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

Esto luego se compila y traduce a algo así como:

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

Pero lo que me gustaría hacer es algo más parecido a lo que sigue, mientras sigo preservando los módulos localizados que css-loader me da:

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

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

es posible? ¿Cómo puedo hacer esto sin tener que realmente require / import un archivo por separado?

Answer 1

Creo que su problema es que su configuración de paquete web actual usa módulos CSS. Los módulos CSS cambian automáticamente el nombre de las clases de CSS para evitar colisiones globales de nombres de clase.

La solución:

// 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") }

Ahora sus nombres de clase serán preservados. Aunque, no estoy seguro de por qué quieres hacer esto. ¿Te importa compartir por qué?