webpack2: jak zaimportować Bootstrap CSS do reakcji-bootstrap, aby znaleźć jego style?

Question

Używam webpack 2 i reaguję-bootstrap w moim projekcie; Nie mogę znaleźć prawidłowego stosowania stylów CSS bootstrap, wygląda na to, że plik .css nie został załadowany, niezależnie od tego, którą próbę użyć.

O ile rozumiem, nie potrzebuję pełnego pakietu bootstrap z javascript itp., Ponieważ używam react-bootstrap; Potrzebuję tylko CSS. Tak I dodaje to w moim main.js pliku:

import 'bootstrap/dist/css/bootstrap.css'; 

Wydaje działa (żaden komunikat o błędzie), ale style nie są stosowane ...

I skonfigurowany ładowarka css w moim pliku config WebPACK jak opisano w dokumentacji Webpack 2.

Każda pomoc będzie mile widziane :)

Answer 1

Ustawiając modules: true w css-loader, CSS jest lokalnie scoped domyślnie, ale trzeba je będzie dostępna globalnie. Najprostszym rozwiązaniem jest całkowite usunięcie modules: true. Wciąż możesz używać modułów w swoich własnych plikach CSS, używając :local.

Ale jeśli chcesz używać modułów, istnieje kilka obejść do importowania globali.

Definiowanie odrębne przepisy

Zamiast umożliwiając modułów dla wszystkich plików CSS, można dokonać dwóch różnych reguł, które odpowiadają żądane pliki. Załóżmy więc, że wszystkie importowane CSS z node_modules powinny być traktowane jako zwykły (globalny) CSS. Zasady wyglądałby następująco:

{ 
    // For all .css files except from node_modules 
    test: /\.css$/, 
    exclude: /node_modules/, 
    use: [ 
    'style-loader', 
    { loader: 'css-loader', options: { modules: true } } 
    ] 
}, 
{ 
    // For all .css files in node_modules 
    test: /\.css$/, 
    include: /node_modules/, 
    use: ['style-loader', 'css-loader'] 
} 

Oczywiście można być bardziej szczegółowe, co chcesz, aby włączyć/wyłączyć, jeśli nie chcesz całą node_modules.

Określanie ładowarki inline

Można określić ładowarki w import i WebPack użyje tych powyżej skonfigurowanych nich. Można by importować bootstrap następująco:

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 

To tylko szybkie obejście bez konieczności zmiany jakichkolwiek config, ale to chyba nie jest pożądane, zwłaszcza gdy posiadające wiele takich przypadków.