CSS (Sitil) Kullanımı

Yüklememiz gereken iki adet temel paket bulunmakta. Bunlar css-loader ve style-loader dir.

npm install style-loader css-loader --save-dev

Şimdi ise Webpack dosyamı güncelliyorum.

{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

Burada seçici dosya uzantım CSS ve yükleyicilerim style-loader ve css-loader burada paketlerin yazım sırası da büyük önem arz etmektedir.

Ana dizinimizde bulunan index dosyamızda statik olarak içe aktardığımız CSS linkini yorum satırı ile geçersiz hale getiriyorum.

<!--<link rel="stylesheet" href="src/css/style.css">-->

src dizinimde bulunan App JS dosyasına CSS’i içe aktarıyorum.

import "../css/style.css"

Çalıştırıyorum…

npm run build

Ve yeniden ekrana çıktımızı bastı, hem de CSS dosyalarımızı da paketleyerek.

GitHub

Buraya kadar yaptığımız çalışmaları GitHub üzerinden görüntüleyebilirsiniz.