Cara menggunakan SCSS untuk penyesuaian gaya dalam Vue

Cara menggunakan SCSS untuk penyesuaian gaya dalam Vue

Dalam projek Vue, untuk menyesuaikan gaya dengan lebih baik, menggunakan SCSS (CSS Sassy) ialah pilihan yang baik. SCSS ialah bahasa lanjutan CSS Ia menyediakan banyak ciri berguna, seperti peraturan bersarang, pembolehubah, campuran, dll., membolehkan kami menulis kod gaya dengan lebih cekap. Yang berikut akan memperkenalkan cara menggunakan SCSS untuk penyesuaian gaya dalam projek Vue, dan menyediakan beberapa contoh kod khusus.

Pertama, kita perlu menyediakan projek Vue dan mengkonfigurasi pengkompil SCSS dalam projek. Pengkompil SCSS yang biasa digunakan termasuk node-sass dan sass-loader Anda boleh memilih salah satu daripada mereka untuk digunakan mengikut keperluan anda sendiri. Contoh berikut menggunakan sass-loader sebagai pengkompil.

1. Pasang dependencies

Masukkan direktori akar projek Vue dalam terminal dan laksanakan arahan berikut untuk memasang sass-loader dan node-sass:

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

2. Buat fail SCSS

dalam direktori

projek, buat folder Baharu untuk menyimpan fail SCSS. Sebagai contoh, kami mencipta folder dipanggil gaya dan di dalamnya fail dipanggil main.scss. Fail main.scss ini akan digunakan untuk menulis gaya global kami.

Konfigurasikan webpack

Cari fail konfigurasi webpack dalam direktori akar projek, biasanya webpack.config.js atau vue.config.js, dan tambah sokongan untuk SCSS dalam fail konfigurasi.

Cari bahagian module.exports dalam fail konfigurasi, kemudian tambah kod berikut:

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

Ini mengkonfigurasi sokongan webpack untuk fail SCSS.

Menulis kod SCSS

Dalam fail utama.scss, kita boleh menulis gaya global, seperti mentakrifkan beberapa pembolehubah, campuran, dsb., untuk digunakan oleh keseluruhan projek.

Kod contoh:

// 定义颜色变量
$primary-color: #42b983;
$secondary-color: #f44336;

// 定义混合
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// 样式示例
.container {
  background-color: $primary-color;
  padding: 20px;

  .title {
    color: $secondary-color;
  }

  .button {
    @include box-shadow(2px, 2px, 5px, #ccc);
    background-color: $secondary-color;
    color: $primary-color;
  }
}

Memperkenalkan fail SCSS ke dalam komponen Vue

Untuk menggunakan gaya yang ditentukan SCSS dalam komponen Vue, anda perlu memperkenalkan fail SCSS dalam teg