Nextjs'de styled-jsx'i SASS ile Kullanmak

Nextjs projelerinizde styled-jsx etiketleri içinde SASS kullanmak isterseniz aşağıdaki adımları uygulayın.

İlk olarak yoksa bir nextjs projesi oluşturun.

npm init next-app 
# ya da
yarn create next-app

Daha sonra styled-jsx-plugin-sass ve node-sass paketlerini yükleyin.

npm install --save-dev styled-jsx-plugin-sass node-sass

Çalıştığınız proje dizininde .babelrc adında bir dosya oluşturun ve şunları yazıp kaydedin.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]
}

Next server'ı yeniden başlatın. Artık <style jsx> içinde sass kodlarınızı kullanmaya başlayabilirsiniz.

VSCode için eklenti önerileri

Editörün bu yazımı desteklemesi için aşağıdaki 2 eklentiyi kurmak yazımınızı kolaylaştıracaktır.

vscode-styled-jsx-plugin-scss - kodları renklendirmek için
styled-jsx Language Server (scss) - otomatik tamamlama ve diğer şeyler için

Karışıklık olmaması için varsa diğer styled-jsx eklentilerini kaldırın.