Adım 1: Vue Projesi Oluşturma
Öncelikle bir Vue.js projesi oluşturmanız gerekmektedir. Eğer Vue CLI yüklü değilse aşağıdaki komut ile yükleyebilirsiniz:
bash
Kodu kopyala
npm install -g @vue/cli
Yeni bir Vue projesi oluşturmak için:
bash
Kodu kopyala
vue create my-vue-project
cd my-vue-project
Adım 2: SCSS Desteğini Etkinleştirme
Vue CLI ile oluşturduğunuz projeye SCSS desteğini eklemek için, projenizin kök dizinindeki vue.config.js adında bir dosya oluşturun (eğer yoksa). Bu dosya, Vue CLI tarafından kullanılan yapılandırma seçeneklerini özelleştirmenize olanak tanır.
javascript
Kodu kopyala
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "@/assets/styles/main.scss";`
}
}
}
};
Yukarıdaki yapılandırma, vue.config.js dosyasında css.loaderOptions.scss altında SCSS için ek yapılandırma ayarlarını sağlar. Burada @import "@/assets/styles/main.scss"; ifadesi, projenizin src/assets/styles dizinindeki main.scss dosyasını projeye dahil edecektir. Bu dosya adını ve yolunu projenizin yapısına göre değiştirebilirsiniz.
Adım 3: SCSS Dosyasını Oluşturma
Projeye eklediğiniz main.scss (veya başka bir adla) dosyasını oluşturun ve SCSS kodlarınızı içine ekleyin. Bu dosyada değişkenler tanımlayabilir, mixin'ler kullanabilir ve daha karmaşık CSS yapısını kolayca yönetebilirsiniz.
Örnek main.scss dosyası:
scss
Kodu kopyala
// main.scss
$primary-color: #3498db;
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.button {
padding: 10px 20px;
background-color: $primary-color;
color: white;
border: none;
cursor: pointer;
&:hover {
background-color: darken($primary-color, 10%);
}
}
Adım 4: Vue Component'lerinde SCSS Kullanımı
Vue component'lerinizde SCSS kodlarını doğrudan kullanabilirsiniz. Vue CLI ile oluşturulan projelerde, her component için ayrı SCSS dosyaları oluşturabilir veya component dosyalarının içinde SCSS kodları yazabilirsiniz.
Örnek bir Vue component'inde SCSS kullanımı:
vue
Kodu kopyala
<template>
<div class="card">
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'CardComponent',
props: {
title: String,
content: String
}
};
</script>
<style lang="scss">
.card {
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
h2 {
font-size: 18px;
margin-bottom: 10px;
}
p {
line-height: 1.6;
}
}
</style>
Bu örnekte, <style> bloğunun lang="scss" özelliği ile SCSS kullanımı belirtilmiştir. Bu şekilde Vue component'lerinizde SCSS yazabilir ve projenizi daha düzenli ve yönetilebilir hale getirebilirsiniz.
SCSS kullanarak daha karmaşık stil yapılarını ve tekrar eden stilleri yönetmek, projenizin bakımını kolaylaştırabilir ve CSS kodlarınızı daha etkili bir şekilde organize etmenize yardımcı olabilir.
