Bagaimana untuk Membetulkan 'styles.bundle.js:33 Ralat Tidak Ditangkap' dalam Angular-CLI Apabila Menggunakan SCSS?

Menyelesaikan masalah "styles.bundle.js:33Uncaught Error" Ralat Semasa Menggunakan Angular-CLI dengan SCSS

Anda telah menghadapi isu di mana Angular -CLI membuang ralat "styles.bundle.js:33Uncaught Error" apabila menggunakan SCSS. Walaupun dokumentasi menyatakan bahawa menjalankan ng set defaults.styleExt scss harus menyelesaikan masalah ini, ia tidak berfungsi untuk anda. Mari kita terokai sebab di sebalik ini dan sediakan penyelesaian yang komprehensif.

Punca Ralat

Ralat berlaku kerana CLI masih cuba mencari dan menggabungkan fail CSS untuk penggayaan. Angular-CLI pada mulanya bermula dengan CSS sebagai sambungan gaya lalai. Apabila anda cuba menggunakan SCSS, CLI mesti dikonfigurasikan untuk mengecam dan memproses fail SCSS.

Penyelesaian untuk Projek Sedia Ada

1. Kemas kini Sambungan Gaya Lalai:

   • Dalam Sudut 5.x dan lebih awal, ubah suai fail .angular-cli.json.
   • Dalam Angular 6 , tukar fail angular.json.
   • Sebagai alternatif, jalankan ng config defaults.styleExt=scss. Jika itu mengakibatkan ralat, gunakan ng config schematics.@schematics/angular:component.styleext scss.

2. Namakan semula Fail CSS kepada SCSS:

   • Tukar gaya.css dan fail CSS komponen (cth., app/app.component.css) ke styles.scss dan fail SCSS komponen yang sepadan.

3. Kemas kini Angular.json (Hanya untuk Angular 6 ):

   • Ubah suai sambungan fail dalam apl[0].gaya dalam angular.json.

4. Tuding Komponen ke Fail Gaya Baharu:

   • Tukar sifat styleUrls dalam definisi komponen kepada sepadan dengan fail SCSS baharu nama.

Penyelesaian untuk Projek Masa Depan

1. Tetapkan Pelanjutan Gaya Semasa Pembuatan Projek:

   • Apabila mencipta projek baharu menggunakan ng baharu, nyatakan --style=scss.

2. Tetapkan Lalai Global:

   • Jika anda lebih suka mempunyai SCSS sebagai gaya lalai sambungan untuk semua projek masa hadapan, jalankan:

   ng config --global defaults.styleExt=scss

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan 'styles.bundle.js:33 Ralat Tidak Ditangkap' dalam Angular-CLI Apabila Menggunakan SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!