web-dev-qa-db-fra.com

Modules CSS: Comment désactiver la portée locale d'un fichier?

J'utilise des modules CSS (via le chargeur Webpack css) dans un nouveau projet React, et même si cela fonctionne très bien, j'ai du mal à obtenir le SCSS pour React Select pour fonctionner. J'imagine que c'est parce qu'il essaie de créer local classNames, que le JS dans react-select ignore. Existe-t-il un moyen d'importer un .scss entier fichier, mais de portée globale au lieu de localement?

webpackcss-modules
17
Steven

Je définis généralement deux chargeurs CSS comme celui-ci:

// 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'
});

J'ai également migré une application vers des modules CSS dans le passé et j'ai trouvé qu'il était utile de définir une convention basée sur l'extension de fichier, par exemple {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'
});
30
riscarrott

Lorsque vous utilisez le chargeur CSS dans votre configuration Webpack, vous souhaiterez généralement activer les modules CSS avec ?modules Activé dans la chaîne de requête, par conséquent, vous activerez la portée :local Par défaut. Cela signifie que si vous voulez déclarer .selector { ... } Sans être converti, vous devez l'utiliser dans une :global(.selector) {}.

Puisque vous utilisez le chargeur SASS, au cas où vous voudriez inclure le CSS d'un fournisseur, vous pouvez l'importer en utilisant @import "~react-select". Le problème comme vous l'avez dit est que cela va convertir tous les sélecteurs de la bibliothèque en local. Pour éviter cela, vous pouvez inclure l'importation dans :global De la même manière que vous le faites avec un sélecteur comme: :global { @import "~react-select"; }

15
javivelasco

Une solution alternative qui fonctionne pour moi (du grattage aux problèmes de github), est la suivante:

Configuration de Webpack2 (section pertinente)

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

moduleX.js

En utilisant slick-carousel par exemple.

// 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 d'autres termes, tout suivra les options configurées de votre fichier de configuration webpack pour le chargeur css, sauf lorsque vous l'importez spécifiquement avec différents chargeurs (le! X! Y)

Si vous avez beaucoup d'exceptions/globales, alors la solution acceptée pourrait être meilleure.

5
Chris