Moduły CSS: Jak wyłączyć zakres lokalny dla pliku?

Question

Używam modułów CSS (przez moduł ładujący css Webpack) w nowym projekcie React i mimo że działa dobrze, mam problem z uruchomieniem SCSS dla React Select. Wyobrażam sobie, że dzieje się tak dlatego, że próbuje utworzyć klasy local, których JS w react-select jest nieświadomy. Czy istnieje sposób importowania całego pliku .scss, ale ma zasięg globalny zamiast lokalnie?

Answer 1

Gdy użytkownik ładowarka css w konfiguracji WebPACK, zazwyczaj wy chciałby włączyć moduły CSS z ?modules włączony ciągu kwerendy, więc uaktywnić zakres :local domyślnie. Oznacza to, że jeśli chcesz zadeklarować .selector { ... } bez konwersji, musisz użyć go do :global(.selector) {}.

Ponieważ używasz programu ładującego SASS, w przypadku, gdy chcesz dołączyć css od dostawcy, możesz go zaimportować za pomocą @import "~react-select". Problem, jak powiedziałeś, polega na tym, że wszystkie selektory z biblioteki zostaną przekonwertowane na lokalne. Aby tego uniknąć, można ująć import w :global tak samo zrobić z selektora jak: :global { @import "~react-select"; }

Answer 2

I ogólnie zdefiniować dwie ładowarki CSS tak:

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

Ja również migrację aplikacji do Moduły CSS w przeszłości i okazało się przydatne zdefiniowanie konwencji opartej na rozszerzeniu pliku, np {Nazwa_pliku} .module.css === Modules CSS vs {nazwa_pliku} .css === Globalny 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

Alternatywnym rozwiązaniem, które pracuje dla mnie (od skrobania poprzez emisje GitHub), przedstawia się następująco:

Webpack2 konfiguracji (odpowiedni fragment)

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

moduleX.js

Korzystanie slick-carousel jako przykład.

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

Innymi słowy, wszystko pójdzie plik konfiguracyjny WebPACK skonfigurowane opcje dla CSS-ładowarki, chyba że wyraźnie zaimportować go z różnych ładowarek (x! Y!)

Jeśli masz dużo wyjątków/globals, wtedy przyjęte rozwiązanie może być lepsze.