React, SASS ile birlikte nasıl kullanılır?

Bu yazıda create-react-app ile kurulan React projelerinde SASS preprocessor’ ünün nasıl kullanılacağından bahsedeceğim.

Öncelikle SASS gibi bir preprocessor kullanmak istediğimizde React’ in bize hazır olarak gelen webpack.config dosyasını değiştirmemiz gerekmektedir. Bu işe başlamak için komut satırına ilk olarak aşağıdaki komutu yazmalıyız.

npm run eject

Burada gelen soru, yapılacak olan değişiklerin kalıcı olduğunu belirterek gerçekten devam etmek isteyip istemediğimizi doğrulamak içindir. Biz “y” yazıp devam ediyoruz.

Bu işlemden sonra klasör dizininde config adında bir dosya oluştuğunu göreceğiz. Webpack.config.dev.js dosyasını açıp aşağıdaki işlemleri gerçekleştirmeliyiz.

test: /\.css$/,  // Bu satırı aşağıdaki satırla değiştirmeliyiz.
test: /\.scss$/,

Bu işlemden sonra use : [] bölümünün içerisine {} ile yeni bir scope açarak içerisine aşağıdaki satırı eklemeliyiz.

loader: require.resolve(‘sass-loader’),

Bu işlemden sonra webpack.config.dev.js dosyasında değişiklik yaptığımız bölüm aşağıdaki gibi görünmelidir. Çıkmadan önce dosyayı kaydetmeyi unutmayalım.

Değişiklik yapılan kısımlar kutucuk içerisine alınmıştır.

Şimdi yeniden console ekranında aşağıdaki komutu yazarak sass için gerekli olan yüklemeyi yapalım.

npm add node-sass sass-loader --dev

Bu işlemden sonra yaptığımız değişikliklerin sonucunu daha kolay görebilmemiz için App.js klasörünün içerisindeki return kısmının içerisini silip aşağıdaki gibi olacak şekilde değiştirelim.

return (
  <div>
    <h1>Selam</h1>
  </div>
);

Şimdi src klasörünün içerisine scss kodlarını yazmamız için style.scss adında yeni bir dosya oluşturalım. İçine aşağıdaki kodları yazalım.

h1{
  color:blue;
  &:hover{
      color: green;
  }
}

Son olarak index.js dosyasına gidip oluşturduğumuz style.scss dosyasını import edelim.

Bu işlemden sonra create-react-app ile oluştuğumuz React projesini artık SASS ile kullanabileceğiz.
:)