Apakah maksud sass apabila vue mencipta projek?

Sass yang digunakan oleh vue semasa mencipta projek adalah untuk mengukuhkan alat bantu css dan merupakan lanjutan daripada css sass ialah bahasa prapemprosesan css yang ditulis dalam bahasa buby dan mempunyai gaya lekukan ketat yang sama seperti html , berbanding dengan spesifikasi penulisan CSS, pendakap kerinting dan koma bertitik tidak digunakan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue3, komputer Dell G3.

Apakah maksud sass apabila mencipta projek dalam vue

Sass (Syntactically Awesome StyleSheets) ialah bahasa prapemprosesan CSS yang ditulis dalam bahasa buby Ia mempunyai gaya lekukan yang sama seperti HTML sangat berbeza daripada spesifikasi penulisan CSS Ia tidak menggunakan pendakap kerinting dan koma bertitik, jadi ia tidak diterima secara meluas.

Sass ialah alat bantu untuk meningkatkan CSS dan lanjutan CSS Ia menambah pembolehubah, peraturan bersarang, campuran, warisan (lanjutkan), import sebaris dan fungsi lanjutan lain, sambungan ini menjadikan CSS lebih berkuasa dan elegan. Menggunakan perpustakaan gaya Sass dan Sass (seperti Compass) membantu mengatur dan mengurus fail gaya dengan lebih baik dan membangunkan projek dengan lebih cekap Akhiran ialah .sass.

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

Perluas pengetahuan:

vue-cli3 menyediakan dua cara untuk mengintegrasikan sass/scss

• Buat projek Apabila memilih sass prapemproses

• Pasang sass-loader secara manual

Kaedah 1: Pilih sass prapemproses semasa mencipta projek vue

Gunakan vue-cli3 untuk mencipta projek vue

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

Gerakkan kekunci atas dan bawah untuk memilih Ciri pilih secara manual, yang bermaksud memilih konfigurasi projek yang dibuat secara manual.

Tekan kekunci enter untuk memasuki langkah seterusnya, paparan adalah seperti berikut:

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Gerakkan kekunci atas dan bawah dan klik bar ruang di CSS Pra-pemproses untuk memilihnya , menunjukkan bahawa alat pra-pemprosesan css diperlukan.

Kemudian teruskan ke operasi alat prapemprosesan css, yang dipaparkan seperti berikut:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

Pilih Sass/SCSS (dengan nod-sass) sebagai prapemproses CSS kami.

Selepas siap, projek akan memasang sass-loader dan kebergantungan nod-sass secara automatik untuk kami.

Kaedah 2: Pemasangan manual

Jika prapemproses CSS tidak dipilih semasa membuat projek, kami juga boleh memasang sass-loader dan node-sass secara manual untuk menyepadukan scss

npm install -D sass-loader node-sass

Gunakan sass

Pada ketika ini kita hanya perlu menentukan lang sebagai scss dalam gaya:

<style>
$color = red;
</style>

vue service clie akan menggunakan sass-loader secara automatik kami memasang Sebagai pemuat untuk kandungan scss.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah maksud sass apabila vue mencipta projek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!