webpack2: Stilleri bulmak için Bootstrap CSS'yi tepkisel önyükleme için nasıl içe aktarılır?

Question

Projemde webpack 2 ve tepki-bootstrap kullanıyorum; Önyükleme CSS stilleri düzgün bir şekilde nasıl uygulanacağını bulamıyorum. Kullanmaya çalıştığım hangi import ifadesi olursa olsun .css dosyası yüklenmemiş gibi görünüyor.

Anladığım kadarıyla, önyükleme-önyükleme kullanıyorum çünkü javascript vb. Ile tam önyükleme paketine ihtiyacım yok; Sadece CSS'ye ihtiyacım var. açıklandığı gibi benim webpack yapılandırma dosyasında css yükleyici yapılandırılmış

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

İşe (hiçbir hata mesajı) ancak stiller uygulanmaz görünüyor

...

: Yani benim main.js dosyasında bu katma webpack 2 dokümantasyonunda.

Herhangi bir yardım

Answer 1

css-loader yılında modules: true ayarı, CSS lokal olarak varsayılan olarak kapsama aldığı :) takdir, ancak bunları genel olarak kullanılabilir olması gerekir olacaktır. En basit çözüm, modules: true'u tamamen kaldırmaktır. Modülleri hala kendi CSS dosyalarınızda :local kullanarak kullanabilirsiniz.

Ancak, modülleri kullanmak isterseniz, içe aktarma globals için bazı geçici çözümler vardır.

tanımlanması ayrı kurallar Bunun yerine, istenen dosyaları eşleşen iki farklı kurallar, yapabilir tüm CSS dosyaları için modülleri etkinleştirme

. Öyleyse, node_modules numaralı tüm CSS ithalatlarının düzenli (global) CSS olarak ele alınması gerektiğini varsayalım. kurallar şu şekilde görünecektir:

{ 
    // 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'] 
} 

Elbette sen/dahil tamamını node_modules istemiyorsanız, dışlamak istediğini daha spesifik olabilir.

belirtilmesi yükleyiciler Sen import içinde yükleyici belirtebilir ve webpack yapılandırılmış olanlar üzerinde olanlar kullanacaktır

inline. aşağıdaki gibi ön yükleme alanı içe olacaktır:

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

Bu, herhangi bir yapılandırma değiştirmek zorunda kalmadan sadece hızlı çözüm olduğunu, ancak birden böyle durumlarda sahip özellikle o muhtemelen arzu değil.