CL-angular dari css ke scss

135

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'(…)

— Jamie
sumber

1

Itu hanya akan berfungsi untuk file yang Anda hasilkan dari titik itu, saya tidak berpikir itu akan memperbaiki yang sudah Anda miliki. Jika Anda, git diffAnda akan melihat apa itu berubah.

— jonrsharpe

Tapi saya belum punya file. Hanya ingin berganti.

— Jamie

Bagaimana Anda belum memiliki file? Jika Anda membuat proyek baru, mengapa Anda mengonfigurasinya seperti itu?

— jonrsharpe

Baru mulai dengan angular2. Saya mencoba mencari tahu semuanya.

— Jamie

1

Jika Anda membuat proyek baru, lakukan ng new whatever --style=scss seperti yang ditunjukkan dalam dokumen . Jangan ikuti instruksi untuk mengkonfigurasi proyek yang ada jika itu bukan yang Anda lakukan!

— jonrsharpe

267

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:

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 )

Ubah nama .cssfile Anda yang ada menjadi .scss(yaitu styles.css dan app / app.component.css)
Arahkan CLI untuk menemukan styles.scss

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

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

— Cantik
sumber

6

EDIT: Saya hanya perlu menyegarkan pembangun waktu nyata. Ini berfungsi dengan benar

— Cristian Traìna

1

@ angular / cli 1.7.3: mengubah defaults.styleExt dari csske scssdalam .angular-cli.jsonakan secara otomatis membuat file scss untuk setiap komponen baru yang dihasilkan di masa depan.

— SimonHawesome

4

ng atur defaults.styleExt scss untuk proyek yang ada

— smedasn

9

untuk angular 6 ikuti github.com/angular/angular-cli/wiki/stories-css-preprosesor

— hamilton.lima

22

@chovy untuk versi cli sudut terbaru, dalam kasus saya (6.0.7) gunakan perintah ini untuk proyek yang ada: ng config schematics.@schematics/angular:component.styleext scss seperti yang diceritakan oleh @ hamilton.lima

— Farhan

52

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"
  }
}

— Jose Orihuela
sumber

Saya schematicsbelum di level root tetapi bersarang di dalam proyek saya di angular.json. Haruskah saya mengabaikannya dan menambahkan ini di tingkat root saja?

— mcheah

1

@mcheah, ya begitulah pengaturan saya juga, dan berfungsi.

— Eric Soyke

Saya meninggalkan milik saya bersarang di dalam proyek dan sepertinya itu berfungsi dengan baik juga, sama seperti FYI bagi siapa saja yang memiliki pertanyaan yang sama.

— mcheah

Setelah memperbarui ke ng6 versi terbaru saya schematicssekarang bersarang juga.

— Jose Orihuela

Sepertinya itu tidak mengubah apa pun untuk saya. Masih tidak memproses aturan scss dalam file .css.

— chovy

34

Buka file angular.json

1. berubah dari

"schematics": {}

untuk

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

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

— BALA
sumber

4

Langkah 1 dapat dilakukan dari CLI: ng config schematics.@schematics/angular:component.styleext scss sebagaimana ditentukan dalam dokumen resmi: github.com/angular/angular-cli/wiki/stories-css-preprocessors

— Marian07

13

Untuk Angular 6,

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

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

— Franklin Pious
sumber

11

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

— Malaikat Roma
sumber

1

Invalid JSON character: "s" at 0:0.

— chovy

Pada Angular CLI 6.0.8 ng config(seperti di atas) adalah metode terbaik TETAPI Anda masih perlu mengganti nama *.cssfile menjadi *.scssDAN mengganti referensi angular.jsonke style.cssdengan style.scssDAN memperbarui semua referensi file komponen di styleUrlsproperti ke nama baru. ... maka itu bekerja dengan baik!

— gkl

8

Untuk proyek yang ada :

Dalam angular.jsonfile

Di buildbagian dan di testbagian, ganti:

"styles": ["src/styles.css"], oleh "styles": ["src/styles.scss"],
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

— veben
sumber

6

Gunakan perintah:

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

— himanshu sharma
sumber

3

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

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

— Jameson Saunders
sumber

3

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

— tilo
sumber

Cemerlang, sedang mencari ini. Terima kasih!

— Ruan Petersen

2

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

Buka folder aplikasi src / app

Buka file ini: app.component.ts
Ubah kode ini styleUrls: ['./app.component.css']menjadistyleUrls: ['./app.component.scss']
Simpan dan tutup.

Di folder yang sama src / app

Ganti nama ekstensi untuk file app.component.css menjadi (app.component.scss)
Ikuti perubahan ini untuk semua komponen lainnya. (mis. rumah, tentang, kontak, dll ...)

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

Cari dan Ganti css ubah ke (scss) .
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.

— Frank Thoeny
sumber

1

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

— Partha Ranjan
sumber

tidak bekerja untuk saya dan saya mencoba melakukannya lebih dari 10

— Kross