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.

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

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

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"
        ],
  

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

• https://github.com/angular/angular-cli/wiki/stories-css-preprosesor

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

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

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.

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 .

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

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

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

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

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.

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.

Jadikan sebagai Global Default

ng set defaults.styleExt=scss --global

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

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.

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