Vuejs ile sass kullanmak

Bu anlatım vue-cli ^3. ve üzeri için geçerli.

Normalde vue-cli içerisinde sass derleyici bulunmuyor, scss dosyalarınız ile işlem yapabilmek için

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

komutu ile sass loader ve araçları projemize ekliyoruzi --save-dev komutu ile package.json dosyamıza da ekleniyor.

Bu işlemden sonra alttaki gibi style tagına lang="scss" ifadesini ekleyerek scss kullanmaya başlayabiliriz.

<style lang="scss">
@import "./scss/_variables.scss";
@import "./scss/_mixins.scss";
@import "./scss/_functions.scss";
</style>

Yukardaki gibi her defasın da import kullanmak yerine variable ve mixin gibi dosylarımızı globak olarak eklememiz mümkün, aslında bu yazının amacı da tam bu. bu işlemi yapmak için vue projemizin root dizinine src klasörünün yanına(içerisine değil) vue.config.js isimli bir dosya oluşturup içerisine alttaki gibi ekleme yapabiliriz

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                  @import '@/assets/scss/_variables.scss';
                  @import '@/assets/scss/_mixins.scss';
                  @import "@/assets/scss/_functions.scss";
                  @import 'node_modules/bootstrap/scss/bootstrap.scss';
                `
            }
        }
    }
};

@ işareti vue projenizin src klasörünü belirtir.

ben daha önceden bootstrap-vue kurulumunu yapmıştım ve node_modules içerisindeki scss klasörü içerisinden boostrap da dahil ettim. Bu sayede button ve diğer bostrap componentlerini mixin larını kullanarak farklı seçenekler üzretmeme kolaylık oluyor.

Bu işlemleri uyguladıktan sonra alttaki gibi variables.scss dosyanızdaki değişkenleri import etmeden proje genelinde kolaylıkla kullanabilirsiniz.

<style lang="scss">
    .header{
        background-color: $headerBg;
    }
</style>

Burda ara