CL-angular dari css ke scss

Saya sudah membaca dokumentasi , yang mengatakan bahwa jika saya ingin menggunakan scsssaya harus menjalankan perintah berikut:

ng set defaults.styleExt scss

Tetapi ketika saya melakukan itu dan membuat file itu, saya masih menerima kesalahan ini di konsol saya:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Untuk Angular 6 periksa dokumentasi Resmi

Catatan: Untuk @angular/cliversi yang lebih lama dari yang 6.0.0-beta.6digunakan ng setdi ng config.

Untuk proyek yang ada

Dalam proyek sudut-cli yang sudah ada yang dibuat dengan cssgaya default, Anda perlu melakukan beberapa hal:

1. Ubah ekstensi gaya default menjadi scss

Ubah secara manual .angular-cli.json(Angular 5.x dan lebih lama) atau angular.json(Angular 6+) atau jalankan:

ng config defaults.styleExt=scss

jika Anda mendapatkan kesalahan: Value cannot be found.gunakan perintah:

ng config schematics.@schematics/angular:component.styleext scss

(* sumber: Pilihan SASS CLI SASS )

2. Ubah nama .cssfile Anda yang ada menjadi .scss(yaitu styles.css dan app / app.component.css)

3. Arahkan CLI untuk menemukan styles.scss

Ubah ekstensi file secara manual apps[0].stylesdiangular.json

4. Arahkan komponen untuk menemukan file gaya baru Anda

Ubah styleUrlskomponen Anda agar sesuai dengan nama file baru Anda

Untuk proyek masa depan

Seperti yang disebutkan @Serginho, Anda dapat mengatur ekstensi gaya saat menjalankan ng newperintah

ng new your-project-name --style=scss

Jika Anda ingin menetapkan default untuk semua proyek yang Anda buat di masa depan, jalankan perintah berikut:

ng config --global defaults.styleExt=scss

Pada ng6 ini dapat diselesaikan dengan kode berikut ditambahkan ke angular.jsonpada tingkat root:

Ubah secara manual .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Buka file angular.json

1. berubah dari

"schematics": {}

untuk

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }

2. ubah dari (di dua tempat)

"src/styles.css"

untuk

"src/styles.scss"

kemudian periksa dan ganti nama semua .cssfile dan perbarui file component.ts styleUrls dari.css to .scss

Untuk Angular 6,

ng config schematics.@schematics/angular:component.styleext scss

catatan: @ schematics / angular adalah skema default untuk CLI Angular

Integrasi CSS Preprocessor untuk Angular CLI: 6.0.3

Saat membuat proyek baru, Anda juga dapat menentukan ekstensi mana yang Anda inginkan untuk file gaya:

ng new sassy-project --style=sass

Atau atur gaya default pada proyek yang ada:

ng config schematics.@schematics/angular:component.styleext scss

Dokumentasi CLI sudut untuk semua preprosesor CSS utama

Untuk proyek yang ada :

Dalam angular.jsonfile

1. Di buildbagian dan di testbagian, ganti:

   "styles": ["src/styles.css"], oleh "styles": ["src/styles.scss"],

2. Menggantikan:

   "schematics": {}, oleh "schematics": { "@schematics/angular:component": { "style": "scss" } },

Menggunakan ng config schematics.@schematics/angular:component.styleext scssperintah berfungsi tetapi tidak menempatkan konfigurasi di tempat yang sama.

Dalam proyek Anda, ganti nama .cssfile Anda menjadi.scss

Untuk proyek baru , perintah ini melakukan semua pekerjaan:

ng n project-name --style=scss

Untuk konfigurasi global

Versi baru tampaknya tidak memiliki perintah global

Gunakan perintah:

ng config schematics.@schematics/angular:component.styleext scss

Di ng6 Anda perlu menggunakan perintah ini, sesuai dengan pos serupa :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Untuk pengguna ekstensi Nrwl yang menemukan utas ini: semua perintah dicegat oleh Nx (mis., ng generate component myCompent) Dan kemudian diteruskan ke AngularCLI.

Perintah untuk membuat SCSS bekerja di ruang kerja Nx:

ng config schematics.@nrwl/schematics:component.styleext scss

Perubahan brute force dapat diterapkan. Ini akan berhasil untuk berubah, tetapi ini proses yang lebih panjang.

Buka folder aplikasi src / app

1. Buka file ini: app.component.ts

2. Ubah kode ini styleUrls: ['./app.component.css']menjadistyleUrls: ['./app.component.scss']

3. Simpan dan tutup.

Di folder yang sama src / app

1. Ganti nama ekstensi untuk file app.component.css menjadi (app.component.scss)

2. Ikuti perubahan ini untuk semua komponen lainnya. (mis. rumah, tentang, kontak, dll ...)

The angular.json file konfigurasi berikutnya. Itu terletak di root proyek.

1. Cari dan Ganti css ubah ke (scss) .

2. Simpan dan tutup.

Terakhir, Mulai ulang ng serve -o.

Jika kompiler mengeluh pada Anda, ulangi langkah-langkahnya lagi.

Pastikan untuk mengikuti langkah-langkah di app / src dengan cermat.

Dalam versi terbaru Angular (v9), kode di bawah ini perlu ditambahkan angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Dapat ditambahkan menggunakan perintah berikut:

ng config schematics.@schematics/angular:component.style scss