Opsi CLI SASS sudut


329

Saya baru mengenal Angular dan saya berasal dari komunitas Ember. Mencoba menggunakan Angular-CLI baru berbasis Ember-CLI.

Saya perlu tahu cara terbaik untuk menangani SASS dalam proyek Angular baru. Saya mencoba menggunakan ember-cli-sassrepo untuk melihat apakah itu akan bermain bersama karena sejumlah komponen inti dari Angular-CLI adalah limpasan dari modul Ember-CLI.

Itu tidak berhasil tapi lagi-lagi tidak yakin apakah saya baru saja mengonfigurasi sesuatu.

Juga, apa cara terbaik untuk mengatur gaya dalam proyek Angular baru? Akan menyenangkan untuk memiliki file sass di folder yang sama dengan komponennya.


3
Anda bisa melihat bagaimana ini digunakan di github.com/angular/material2 misalnya komponen tombol github.com/angular/material2/tree/master/src/components/button
Günter Zöchbauer

Jawaban:


544

CLI sudut 9 versi (digunakan untuk membuat proyek 9 sudut) sekarang mengambil styledari skema bukan styleext. Gunakan perintah seperti ini:
ng config schematics.@schematics/angular:component.style scss
dan angular.json yang dihasilkan akan terlihat seperti ini

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

Solusi & penjelasan lain yang mungkin:

Untuk membuat proyek baru dengan CLI sudut dengan dukungan sass, coba ini:

ng new My_New_Project --style=scss 

Anda juga dapat menggunakan --style=sass& jika Anda tidak tahu bedanya, baca artikel singkat & mudah ini dan jika Anda masih tidak tahu, cukup ikuti scss& terus belajar.

Jika Anda memiliki proyek sudut 5, gunakan perintah ini untuk memperbarui konfigurasi untuk proyek Anda.

ng set defaults.styleExt scss

Untuk Versi Terbaru

Untuk Angular 6 untuk menetapkan gaya baru pada proyek yang ada dengan CLI:

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

Atau Langsung ke angular.json:

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

17
Kemudian Anda dapat mengubahnya dari angular.cli.json di file ini ada "default": {"styleExt": "css", "prefixInterfaces": false, "inline": {"style": false, "template": false} Anda dapat mengubah styleExt
Mertcan Diken

145
ng set defaults.styleExt scss
Sebas

4
jangan lupa untuk mengubah styleproperti menjadi scssdi.angular-cli.json
OST

3
ng set defaults.styleExt scss --global
JoshuaDavid

29
Untuk Angular 6 untuk menetapkan gaya baru pada proyek yang adang config schematics.@schematics/angular:component.styleext scss
Nehal Damania

344

Pembaruan untuk Angular 6+

  1. Proyek Baru

    Saat membuat proyek baru dengan Angular CLI, tentukan prosesor pra-css sebagai

    • Gunakan sintaksis SCSS

      ng new sassy-project --style=scss
      
    • Gunakan sintaks SASS

      ng new sassy-project --style=sass
      
  2. Memperbarui proyek yang ada

    Tetapkan gaya default pada proyek yang ada dengan menjalankan

    • Gunakan sintaksis SCSS

      ng config schematics.@schematics/angular:component.styleext scss
      
    • Gunakan sintaks SASS

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

    Perintah di atas akan memperbarui file ruang kerja Anda (angular.json) dengan

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

    di mana styleextbisa menjadi scssatau sasssesuai pilihan.




Jawaban Asli (untuk Angular <6)

Proyek baru

Untuk proyek-proyek baru kita dapat mengatur opsi --style=sassatau --style=scsssesuai dengan SASS / SCSS rasa yang diinginkan

  • Gunakan sintaks SASS

    ng new project --style=sass 
    
  • Gunakan sintaksis SCSS

    ng new project --style=scss 
    

lalu instal node-sass,

npm install node-sass --save-dev

Memperbarui proyek yang ada

Untuk membuat angular-cliuntuk mengkompilasi file sass dengan node-sass, saya harus menjalankan,

npm install node-sass --save-dev 

yang menginstal node-sass. Kemudian

  • untuk sintaks SASS

    ng set defaults.styleExt sass
    
  • untuk sintaks SCSS

    ng set defaults.styleExt scss
    

untuk mengatur styleExt default ke sass

(atau)

ubah styleExtke sassatau scssuntuk sintaks yang diinginkan di .angular-cli.json,

  • untuk sintaks SASS

    "defaults": {
         "styleExt": "sass",
    }
    
  • untuk sintaks SCSS

    "defaults": {
         "styleExt": "scss",
    }
    


Meskipun itu menghasilkan kesalahan kompiler.

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

yang diperbaiki dengan mengubah garis .angular-cli.json,

"styles": [
        "styles.css"
      ],

untuk baik,

  • untuk sintaks SASS

    "styles": [
            "styles.sass"
          ],
    
  • untuk sintaks SCSS

    "styles": [
            "styles.scss"
          ],
    

3
Satu-satunya hal yang memberiku masalah adalah itu angular-cli.jsonsebenarnya .angular-cli.json. Setelah saya menyadari ini, saya mengeditnya dan ini berfungsi dengan baik. Terima kasih.
OldTimeGuitarGuy

@OldTimeGuitarGuy Terima kasih telah menunjukkannya, file yang dulu bernama angular-cli.jsondiubah sebagai file tersembunyi ( .angular-cli.json) baru-baru ini (rc2). Tetap.
Semua ini

Jika Anda mengganti nama .cssfile yang sudah ada, Anda mungkin perlu menutup dan membukanya lagi di editor Anda agar dapat mengenali sintaks sass dengan benar. Ini benar bahkan dengan Visual Studio terbaru,
Simon_Weaver

1
Untuk angular 6 node-sass sudah terpasang jadi tidak perlu menginstalnya.
hancurkan-semuanya

1
Saya memiliki pengaturan yang sama tetapi mengimpor file scss langsung ke komponen tidak berfungsi, sementara mengimpornya ke styles.scss berfungsi dengan baik. Saya menggunakan angular cli verison 7+, apakah ada bug?
Hemant Sankhla

37

Dikutip dari Official github repo di sini -

Untuk menggunakan satu cukup instal misalnya

npm install node-sass

dan ganti nama file .css di proyek Anda menjadi .scss atau .sass. Mereka akan dikompilasi secara otomatis. Argumen opsi Angular2App memiliki opsi sassCompiler, lessCompiler, stylusCompiler dan kompasCompiler yang diteruskan langsung ke masing-masing preprosesor CSS mereka.

Lihat disini


5
mungkin ingin menambahkan --save-dev, tidak yakin mengapa itu tidak ada dalam dokumen seperti itu tetapi kehilangan ketika kita melakukan upgrade dan kemudian tidak bisa mengetahui mengapa gaya kita hilang
regnar

2
Ada masalah di mana file sass dengan garis bawah utama juga sedang dikompilasi, tetapi diperbaiki pada angular-cli 1.0.0-beta.9
Andy Ford


26

Katakan angular-cli untuk selalu menggunakan scss secara default

Untuk menghindari lewat --style scsssetiap kali Anda menghasilkan proyek, Anda mungkin ingin menyesuaikan konfigurasi default angular-cli secara global, dengan perintah berikut:

ng set --global defaults.styleExt scss


Harap dicatat bahwa beberapa versi angular-cli berisi bug dengan membaca bendera global di atas ( lihat tautan ). Jika versi Anda mengandung bug ini, hasilkan proyek Anda dengan:

ng new some_project_name --style=scss

Saya menggunakan angularCLI v. 1.2.1 (terbaru, per Juli 2017) dan saya memiliki bug yang Anda jelaskan. saya menjalankan perintah ini, dan tampaknya berfungsi sempurna untuk komponen baru secara default, tetapi proyek baru masih membuat app.component.css kecuali saya tentukan--style=scss
Jeremy Moritz

21

Seperti kata Mertcan, cara terbaik untuk menggunakan scss adalah membuat proyek dengan opsi itu:

ng new My_New_Project --style=scss 

Angular-cli juga menambahkan opsi untuk mengubah preprosesor css default setelah proyek dibuat dengan menggunakan perintah:

ng set defaults.styleExt scss

Untuk info lebih lanjut Anda dapat melihat di sini untuk dokumentasi mereka:

https://github.com/angular/angular-cli


3
ng settampaknya tidak berfungsi pada pengaturan dalam appsarray. Misalnya. ng set apps.prefix blahmelempar "Token tak terduga b di JSON di posisi 0".
im1dermike

15

Saya perhatikan gotcha yang sangat aneh dalam pindah ke file scss !!! Satu HARUS pindah dari yang sederhana: styleUrls: ['app.component.scss']ke styleUrls: ['./app.component.scss'](tambahkan ./) diapp.component.ts

Yang ng lakukan ketika Anda menghasilkan proyek baru, tetapi tampaknya tidak ketika proyek default dibuat. Jika Anda melihat kesalahan penyelesaian selama pembuatan, periksa masalah ini. Hanya butuh saya ~ 1 jam.


3
ini ada di app.component.ts untuk mereka yang terlalu malas untuk mencari :)
embee

5

Mungkin yang terbaik ng new myApp --style=scss

Maka Angular CLI akan membuat komponen baru dengan scss untuk Anda ...

Perhatikan bahwa menggunakan scsstidak berfungsi di browser seperti yang mungkin Anda ketahui .. jadi kami membutuhkan sesuatu untuk dikompilasi css, untuk alasan ini kami dapat menggunakannya node-sass, instal seperti di bawah ini:

npm install node-sass --save-dev

dan kamu harus baik untuk pergi!

Jika Anda menggunakan webpack, baca di sini:

Baris perintah di dalam folder proyek tempat package.json Anda ada: npm install node-sass sass-loader raw-loader --save-dev

Di webpack.common.js, cari "aturan:" dan tambahkan objek ini ke akhir array aturan (jangan lupa untuk menambahkan koma ke akhir objek sebelumnya):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Kemudian di komponen Anda:

@Component({
  styleUrls: ['./filename.scss'],
})

Jika Anda menginginkan dukungan CSS global, maka pada komponen tingkat atas (kemungkinan app.component.ts) hapus enkapsulasi dan sertakan SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

dari starter Angular di sini .


5

ng set --global defaults.styleExt=scsssudah usang sejak ng6. Anda akan mendapatkan pesan ini:

get / set telah ditinggalkan karena perintah config

Kamu harus menggunakan:

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

Jika Anda ingin menargetkan proyek tertentu (ganti {project} dengan nama proyek Anda):

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


3

Angular-CLI adalah metode yang direkomendasikan dan merupakan standar dalam komunitas Angular 2+.

Kreta proyek baru dengan SCSS

ng new My-New-Project --style=sass

Konversi proyek yang ada (CLI kurang dari v6)

ng set defaults.styleExt scss

(harus mengganti nama semua file .css secara manual dengan pendekatan ini, jangan lupa untuk mengganti nama di file komponen Anda)


Konversi proyek yang ada (CLI lebih besar dari v6)

  1. ganti nama semua file CSS menjadi SCSS dan perbarui komponen yang mereferensikannya.
  2. tambahkan yang berikut ini ke kunci "schematics" dari angular.json (biasanya baris 11):

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


3

Untuk Angular 9.0 ke atas, perbarui "schematics":{}objek dalam file angular.json seperti ini:

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

Terima kasih, saya bertanya-tanya mengapa itu tidak berhasil dan ternyata mereka menamainya stylesekarang
Dino

2

Berikut ini harus bekerja dalam proyek CLI 6 sudut. Yaitu jika Anda mendapatkan:

get / set telah ditinggalkan karena perintah config.

npm install node-sass --save-dev

Kemudian ( pastikan Anda mengubah nama proyek )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Untuk mendapatkan nama proyek default Anda gunakan:

ng config defaultProject

Namun: Jika Anda telah memigrasi proyek Anda dari <6 hingga sudut 6, ada kemungkinan konfigurasi tersebut tidak akan ada. Dalam hal ini Anda mungkin mendapatkan:

Karakter JSON tidak valid: "s" pada 0: 0

Oleh karena itu diperlukan pengeditan manual angular.json.

Anda akan menginginkannya terlihat seperti ini (perhatikan properti styleex):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Sepertinya bagiku skema yang terlalu rumit. ¯_ (ツ) _ / ¯

Anda sekarang harus pergi dan mengubah semua file css / less Anda menjadi scss dan memperbarui referensi dalam komponen dll, tetapi Anda harus melakukannya dengan baik.


2

Pada 3/10/2019, Anguar menjatuhkan dukungan sass. Tidak ada pilihan apa pun yang Anda berikan --styleketika menjalankan ng new, Anda selalu mendapatkan .scssfile yang dihasilkan. Sayang sekali bahwa dukungan sass dijatuhkan tanpa penjelasan.


1
Bagi siapa pun yang berjuang dengan ini setelah 3/10/2019: Angular memperkenalkan kembali dukungan sass untuk angular-cli di 8.0.0-beta.5 dan harus segera kembali ke cabang rilis utama. Anda dapat menginstal pra-rilis dengannpm install -g @angular/cli@8.0.0-beta.5
mkrl

Menarik. Terima kasih telah mengingatkan. Karena penasaran, tahukah Anda mengapa mereka menjatuhkan dukungan?
Baru belajar

Rupanya tim Angular menyebutnya sebagai sintaks "tidak lagi relevan", setidaknya itulah yang dinyatakan dalam PR ini oleh anggota tim inti, tidak dapat menemukan informasi lebih lanjut tentang ini.
mkrl


0

Integrasi Preprosesor CSS Angular CLI mendukung semua preprosesor CSS utama:

Untuk menggunakan preprosesor ini cukup tambahkan file ke styleUrls komponen Anda:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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

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

String gaya yang ditambahkan ke array @ Component.styles harus ditulis dalam CSS karena CLI tidak dapat menerapkan pra-prosesor ke gaya inline.

Berdasarkan dokumentasi sudut https://github.com/angular/angular-cli/wiki/stories-css-preprocessors


0

Saya mencoba memperbarui proyek saya untuk menggunakan sass menggunakan perintah ini

atur defaults.styleExt scss

tapi dapatkan ini

get / set telah ditinggalkan karena perintah config.

  • CLI sudut: 6.0.7
  • Node: 8.9.0
  • OS: linux x64
  • Sudut: 6.0.3

Jadi saya menghapus proyek saya (karena saya baru memulai dan tidak memiliki kode dalam proyek saya) dan membuat yang baru dengan sass awalnya ditetapkan

ng my-sassy-app --style = scss

Tetapi saya akan sangat menghargai jika seseorang dapat berbagi cara untuk memperbarui proyek yang ada karena itu akan menyenangkan.


seseorang telah menjawab ini untuk proyek Angular 6 yang ada di sini
padigan

0

Langkah 1. Instal paket bulma menggunakan npm

npm install --save bulma

Langkah 2. Buka angular.json dan perbarui kode berikut

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

Itu dia.

Untuk dengan mudah mengekspos alat Bulma, tambahkan stylePreprocessorOptions ke angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6


itu benar-benar di luar standar sudut, dan menggunakan scss hanyalah efek sekunder dari menggunakan bulma
netalex
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.