: Come disabilitare l'ambito locale per un file?

Question

Sto usando i moduli CSS (tramite il css loader Webpack) in un nuovo progetto React e, anche se funziona alla grande, ho problemi a far funzionare lo SCSS per React Select. Immagino che questo sia dovuto al fatto che tenta di creare nomi di classe local, a cui il JS in react-select non è a conoscenza. C'è un modo per importare un intero file .scss, ma con scope globale invece che localmente?

Answer 1

Quando si utilizza il css loader nella configurazione Webpack, in genere si desidera attivare i moduli CSS con ?modules abilitato in querystring, pertanto si attiva lo scope :local per impostazione predefinita. Ciò significa che se si desidera dichiarare .selector { ... } senza essere convertito, è necessario utilizzarlo in un :global(.selector) {}.

Poiché si utilizza il caricatore SASS, nel caso in cui si desideri includere css da un fornitore, è possibile importarlo utilizzando @import "~react-select". Il problema, come hai detto, è che porterà tutti i selettori dalla libreria convertiti in locale. Per evitare questo, è possibile racchiudere l'importazione nel :global allo stesso modo si fa con un selettore del tipo: :global { @import "~react-select"; }

Answer 2

Io generalmente definisco due caricatori CSS in questo modo:

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

Ho anche migrati un app per I moduli CSS in passato hanno scoperto che era utile definire una convenzione basata sull'estensione del file, ad es {Nome} .module.css === moduli CSS vs {nome} css === globale 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 soluzione alternativa che sta lavorando per me (da raschiare attraverso le edizioni GitHub), è la seguente:

Webpack2 configurazione (relativa sezione)

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

moduleX.js

Uso slick-carousel come esempio.

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

In altre parole, tutto ciò che seguirà il vostro file di configurazione webpack opzioni configurate per il css-caricatore, tranne quando espressamente importarlo con diversi caricatori (l'! X! Y)

Se si hanno molti di eccezioni/globals, quindi la soluzione accettata potrebbe essere migliore.