Angular'da yeniyim ve Ember topluluğundan geliyorum. Ember-CLI tabanlı yeni Angular-CLI kullanmaya çalışılıyor.

Yeni bir Açısal projede SASS ile başa çıkmanın en iyi yolunu bilmem gerekiyor. ember-cli-sassAngular-CLI'nin bir dizi temel bileşeni Ember-CLI modüllerinin tükendiği için repo'yu kullanmayı denedim .

Bu işe yaramadı ama ben sadece bir şey yanlış yapılandırılmış emin değilim.

Ayrıca, yeni bir Açısal projede stilleri düzenlemenin en iyi yolu nedir? Sass dosyasını bileşenle aynı klasörde bulundurmak güzel olurdu.

Açısal CLI sürüm 9 (Açısal 9 projeler oluşturmak için kullanılır) şimdi styleyerine şemalardan alır styleext. Komutu şu şekilde kullanın:
ng config schematics.@schematics/angular:component.style scss
ve sonuçta ortaya çıkan angular.json şöyle görünecektir

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

Diğer olası çözümler ve açıklamalar:

To açısal CLI ile yeni bir proje oluşturun küstahlık desteğiyle, bu deneyin:

ng new My_New_Project --style=scss 

Ayrıca kullanabilirsiniz --style=sassve farkı bilmiyorsanız, bu kısa ve kolay makaleyi okuyun ve hala bilmiyorsanız, scssöğrenmeye devam edin.

Açısal bir 5 projeniz varsa, projenize ilişkin yapılandırmayı güncellemek için bu komutu kullanın.

ng set defaults.styleExt scss

En Son Sürümler için

Açısal 6'nın CLI ile mevcut projede yeni bir stil oluşturması için:

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

Veya Doğrudan açısal olarak. Json:

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

Açısal 6+ için güncelleme

1. Yeni projeler

   Tüm yeni bir proje üreten Eğik CLI olarak CSS ön işlemci belirtmek

   • SCSS sözdizimini kullan

     ng new sassy-project --style=scss
     

   • SASS sözdizimini kullan

     ng new sassy-project --style=sass
     

2. Mevcut projeyi güncelleme

   Set varsayılan stil varolan proje üzerinde çalışan tarafından

   • SCSS sözdizimini kullan

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

   • SASS sözdizimini kullan

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

   Yukarıdaki komut, çalışma alanı dosyanızı (angular.json) şununla güncelleyecektir:

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

   nerede styleextya scssda sassseçim göre olabilir.

Orijinal Yanıt (Açısal <6 için)

Yeni projeler

Yeni projeler için seçenekleri ayarlayabiliriz --style=sassya da --style=scssSASS / SCSS lezzetine göre ayarlayabiliriz.

• SASS sözdizimini kullan

  ng new project --style=sass 
  

• SCSS sözdizimini kullan

  ng new project --style=scss 
  

sonra yükleyin node-sass,

npm install node-sass --save-dev

Mevcut projeleri güncelleme

Yapmak için angular-clibirlikte küstahlık dosyalarını derlemek node-sassKaçmak zorunda kaldı,

npm install node-sass --save-dev 

yükler node-sass. Sonra

• SASS sözdizimi için

  ng set defaults.styleExt sass
  

• SCSS sözdizimi için

  ng set defaults.styleExt scss
  

stilini ayarlamak için

(veya)

değiştirmek styleExtiçin sassya da scssistenen sözdizimi .angular-cli.json,

• SASS sözdizimi için

  "defaults": {
       "styleExt": "sass",
  }
  

• SCSS sözdizimi için

  "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 

Bu, satırları değiştirilerek düzeltildi .angular-cli.json,

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

ikisinden birine,

• SASS sözdizimi için

  "styles": [
          "styles.sass"
        ],
  

• SCSS sözdizimi için

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

Burada yetkililer github repo alıntı -

Birini kullanmak için örneğin yükleyin

npm install node-sass

ve projenizdeki .css dosyalarını .scss veya .sass olarak yeniden adlandırın. Bunlar otomatik olarak derlenecektir. Angular2App'ın seçenekler bağımsız değişkeni, doğrudan ilgili CSS ön işlemcilerine iletilen sassCompiler, lessCompiler, stylusCompiler ve compassCompiler seçeneklerine sahiptir.

Buraya bakın

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

Açısal-cli'ye scss'yi her zaman varsayılan olarak kullanmasını söyle

--style scssHer proje oluşturduğunuzda geçmekten kaçınmak için, açısal-cli varsayılan yapılandırmanızı aşağıdaki komutla global olarak ayarlamak isteyebilirsiniz:

ng set --global defaults.styleExt scss

Açısal klibin bazı sürümlerinin yukarıdaki genel bayrağı okurken hata içerdiğini lütfen unutmayın ( bağlantıya bakın ). Sürümünüz bu hatayı içeriyorsa, projenizi şununla oluşturun:

ng new some_project_name --style=scss

Mertcan'ın dediği gibi, scss kullanmanın en iyi yolu projeyi bu seçenekle oluşturmaktır:

ng new My_New_Project --style=scss 

Açısal-cli, proje aşağıdaki komut kullanılarak oluşturulduktan sonra varsayılan css önişlemcisini değiştirme seçeneği de ekler:

ng set defaults.styleExt scss

Daha fazla bilgi için belgelerine buradan bakabilirsiniz:

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

Ben scss dosyaları taşıma çok anoying gotcha fark !!! Biri basit hareket GEREKİR: styleUrls: ['app.component.scss']için styleUrls: ['./app.component.scss'](eklenti./ ) 'deapp.component.ts

Yeni bir proje oluşturduğunuzda, ancak varsayılan proje oluşturulduğunda görünmüyor. Oluşturma sırasında oluşan hataları giderirseniz, bu sorunu kontrol edin. Sadece ~ 1 saat sürdü.

En iyisi olabilir ng new myApp --style=scss

Sonra Açısal CLI sizin için scss ile yeni bir bileşen yaratacaktır ...

Not o kullanarak scssbiz bunu derlemek için bir şey lazım bu yüzden .. muhtemelen bildiğiniz gibi tarayıcıda çalışmıyor css, kullanabileceğimiz bu nedenle node-sass, aşağıda gibi kurun:

npm install node-sass --save-dev

ve gitmek için iyi olmalısın!

Webpack kullanıyorsanız, buradan okuyun:

Mevcut paketinizin bulunduğu proje klasörü içindeki komut satırı.json: npm install node-sass sass-loader raw-loader --save-dev

İçinde webpack.common.js, "rules:" öğesini arayın ve bu nesneyi rules dizisinin sonuna ekleyin (önceki nesnenin sonuna virgül eklemeyi unutmayın):

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

Sonra bileşeninizde:

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

Global CSS desteği istiyorsanız, en üst düzey bileşende (muhtemelen app.component.ts) kapsüllemeyi kaldırın ve SCSS'yi ekleyin:

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

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

Eğik marş burada .

ng set --global defaults.styleExt=scssng6'dan beri kullanımdan kaldırıldı. Bu mesajı alacaksınız:

get / set config komutu lehine kullanımdan kaldırıldı

Kullanmalısın:

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

Belirli bir projeyi hedeflemek istiyorsanız ({project} projenizin adıyla değiştirin):

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

Angular-CLI önerilen yöntemdir ve Angular 2+ topluluğunda standarttır.

SCSS ile yeni bir proje hazırlayın

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

Mevcut bir projeyi dönüştürme (CLI v6'dan daha az)

ng set defaults.styleExt scss

(bu yaklaşımla tüm .css dosyalarını manuel olarak yeniden adlandırmalısınız, bileşen dosyalarınızda yeniden adlandırmayı unutmayın)

Mevcut bir projeyi dönüştürme (CLI v6'dan büyük)

1. tüm CSS dosyalarını SCSS olarak yeniden adlandırın ve bunlara başvuran bileşenleri güncelleyin.
2. angular.json (genellikle satır 11) "şemaları" tuşuna aşağıdakileri ekleyin:

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

İçin açısal 9.0 ve üzeri, güncelleme "schematics":{}nesne angular.json böyle dosyası:

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

Aşağıdakiler açısal bir CLI 6 projesinde çalışmalıdır. Yani alıyorsanız:

get / set config komutu lehine kullanımdan kaldırıldı.

npm install node-sass --save-dev

Ardından ( proje adını değiştirdiğinizden emin olun )

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

Varsayılan proje adınızı almak için şunu kullanın:

ng config defaultProject

Ancak , projenizi <6'dan açısal 6'ya geçirdiyseniz, yapılandırmanın orada olmayacağı ihtimali yüksektir. Bu durumda şunları alabilirsiniz:

Geçersiz JSON karakteri: 0: 0'da "s"

Bu nedenle, üzerinde manuel düzenleme angular.jsonyapılması gerekecektir.

Bunun gibi bir şey görünmesini isteyeceksiniz (styleex özelliğini not ederek):

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

Bana çok karmaşık bir şema gibi geliyor. _ (ツ) _ / ¯

Şimdi gitmeli ve tüm css / less dosyalarınızı scss olarak değiştirmeli ve bileşenler vb.

3/10/2019 itibariyle Anguar sass desteğini düşürdü. Hiçbir mater --styleçalışırken hangi seçenek geçti ng new, her zaman .scssoluşturulan dosyaları almak . Sass desteğinin herhangi bir açıklama yapmadan düşürülmesi utanç verici.

Genel Varsayılan olarak ayarla

ng set defaults.styleExt=scss --global

CSS Önişlemci entegrasyonu Açısal CLI tüm büyük CSS ön işlemcilerini destekler:

Bu ön işlemcileri kullanmak için dosyayı bileşeninizin styleUrls dosyasına eklemeniz yeterlidir:

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

Yeni bir proje oluştururken stil dosyaları için hangi uzantıyı istediğinizi de tanımlayabilirsiniz:

ng new sassy-project --style=sass

Veya mevcut bir projede varsayılan stili ayarlayın:

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

not: @ schematics / angular, Açısal CLI için varsayılan şemadır

CLI satır içi stillere ön işlemci uygulayamadığından @ Component.styles dizisine eklenen stil dizeleri CSS'de yazılmalıdır.

Açısal belgelere dayanarak https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Bu komutu kullanarak sass'ı kullanmak için projemi güncellemeye çalıştım

ng set Defaults.styleExt scss

ama anladım

get / set config komutu lehine kullanımdan kaldırıldı.

• Açısal CLI: 6.0.7
• Düğüm: 8.9.0
• İşletim Sistemi: linux x64
• Açısal: 6.0.3

Bu yüzden projemi sildim (yeni başladım ve projemde kod yoktu) ve başlangıçta sass ile yeni bir tane oluşturdum

ng my my-sassy-app --style = scss

Ancak, birisinin mevcut projeyi güncellemenin bir yolunu paylaşabileceğini takdir ediyorum.

Aşama 1. Npm kullanarak bulma paketini kurun

npm install --save bulma

Adım 2. Angular.json dosyasını açın ve aşağıdaki kodu güncelleyin

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

Bu kadar.

Bulma'nın araçlarını kolayca ortaya çıkarmak için angular.json dosyasına stylePreprocessorOptions ekleyin.

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

BULMA + ANGULAR 6