Vue.js'de Scss kullanımı

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.

Yusuf Borucu

Benim adım Yusuf. 1993 yılında Şanlıurfa'da doğdum. 2015 yılında Bilecik Şeyh Edebali Üniversitesi Bilgisayar Mühendisliği bölümünden mezun oldum. Şu anda özel bir şirkette Yazılım Geliştirici olarak çalışmaktayım. Yazılıma yönelik uğraştığım, sevdiğim ve ilgi duyduğum teknolojilerden bahsetmem gerekirse; Laravel, Asp.Net Mvc, Android (Kotlin & Java), Vue.js, Node.js, MySQL, MSSQL, MongoDB. Her ge...

"Vue.js'de Scss kullanımı" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.