İ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 sass-loader@7.3.1
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ç:
