Merhaba,


Bu yazıda Vue.js'de Scss kullanımından bahsedeceğim.


İlk olarak boş bir Vue.js projesi oluşturuyoruz:

vue init webpack-simple vue-scss-example


Proje dizinine gelip projenin çalışması için gerekli bağımlılıkları kuruyoruz:

npm install


Scss için gerekli paketleri kuruyoruz:

npm install --save-dev node-sass sass-loader


ÖNEMLİ NOT!

Bu paketleri (node-sass ve sass-loader) kurduktan sonra projeyi çalıştırmak istediğinizde (npm run dev) bir hatayla karşılaşabilirsiniz. Bu hatanın sebebi webpack ile sass-loader paketlerinin çakışmasıdır. Bu çakışmanın yaşanmaması için ikisininde güncel versiyonunu yüklemiş olmanız gerekmektedir. Şu anki (18.12.2019) güncel versiyonlar;

webpack: 4.41.3

sass-loader: 8.0.0


Ancak Scss'i kullanmak istediğiniz projede webpack'in 4.x.x'ten önceki sürümleri (3.x.x) mevcutsa ve bunu değişme imkanınız yoksa bu paket yükleme işlemini şu şekilde yapmanız hatanın giderilmesini sağlayacaktır:

npm install --save-dev node-sass [email protected]


Gerekli paketleri kurma işlemini tamamladıktan sonra proje dizininde bulunan webpack.config.js dosyasını açıyoruz ve şu şekilde bir düzenleme yapıyoruz:

...

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },   
      ...


Son olarak Scss'i hangi style kısmında kullanmak istiyorsak oraya şu şekilde bir ekleme yapıyoruz:

<style lang="scss">

</style>


Şimdi örnek olması açısından App.vue dosyasını açıp düzenleyelim:

<template>
  <div class="content">    
    <h1>Şehirler</h1>
    <ul class="cities">
      <li class="city">Sakarya</li>
      <li class="city">Bursa</li>      
      <li class="city">Bilecik</li>
    </ul>
  </div>
</template>

<style lang="scss">
  $color: #34495e;
  .content {
    background: $color;
    padding: 10px;
    h1 {
      color: #fff;
    }
    .cities {
      color: #fff;
      list-style: none;
      font-size: 20px;
      .city {
        font-weight: 500;
      }
    }
  }
</style>


Ve sonuç:


Umarım yararlı olmuştur.


İyi çalışmalar.