webpack - tecnicas - Módulos CSS: ¿Cómo deshabilito el ámbito local para un archivo?

tecnicas de archivo wikipedia

Question

Estoy usando Módulos CSS (a través del cargador css de Webpack) en un nuevo proyecto React, y aunque está funcionando bien, estoy teniendo problemas para que SCSS para React Select funcione. Me imagino que esto se debe a que trata de crear nombres de clase local , que JS en react-select desconoce. ¿Hay una manera de importar un archivo .scss completo, pero con un alcance global en lugar de local?

Answer 1

Cuando utiliza el cargador css en la configuración de su paquete web, normalmente desearía activar los módulos CSS con ?modules habilitados en la cadena de consulta, por lo tanto, activará el ámbito :local de forma predeterminada. Esto significa que si desea declarar .selector { ... } sin convertirlo, debe usarlo en :global(.selector) {} .

Ya que está usando el cargador SASS, en caso de que quiera incluir css de un proveedor, puede importarlo usando @import "~react-select" . El problema, como usted dijo, es que esto hará que todos los selectores de la biblioteca se conviertan a locales. Para evitar esto, puede incluir la importación en :global la misma manera que lo hace con un selector como :global { @import "~react-select"; } :global { @import "~react-select"; }

Answer 2

Generalmente defino dos cargadores de CSS como este:

// Global CSS
// We make the assumption that all CSS in node_modules is either
// regular ''global'' css or pre-compiled.
loaders.push({
    test: //.css$/,
    include: /node_modules/,
    loader: ''style-loader!css-loader''
});

// CSS modules
loaders.push({
    test: //.css$/,
    exclude: /node_modules/,
    loader: ''style-loader!css-loader?modules''
});

También migré una aplicación a módulos CSS en el pasado y descubrí que era útil definir una convención basada en la extensión de archivo, por ejemplo, {filename} .module.css === CSS Modules vs {filename} .css === Global CSS

// Global CSS
loaders.push({
    test: //.css$/,
    exclude: //.module/.css$/,
    loader: ''style-loader!css-loader''
});

// CSS modules
loaders.push({
    test: //.module/.css$/,
    loader: ''style-loader!css-loader?modules''
});

Answer 3

Una solución alternativa que funciona para mí (desde el raspado hasta problemas con github), es la siguiente:

Configuración webpack2 (sección relevante)

    {
        test: //.css$/,
        use: [{
            loader: ''style-loader'',
        }, {
            loader: ''css-loader'',
            options: {
                modules: true,
            },
        }, {
            loader: ''postcss-loader'',
        }],
    }

moduleX.js

Usando slick-carousel como ejemplo.

// Import the libraries css without the module gear being applied
//
import ''!style-loader!css-loader!slick-carousel/slick/slick.css'';

// Import my applications css. `styles` will be the typical 
// `slide_foo_xeh54` style set of module exports 
// (depending how you have your css-loader 
// configured
//
import styles from ''./Slides.css'';

En otras palabras, todo seguirá las opciones configuradas del archivo de configuración de su paquete web para el css-loader, excepto cuando lo importe específicamente con diferentes cargadores (el! X! Y)

Si tiene muchas excepciones / globales, entonces la solución aceptada podría ser mejor.