Angular-cli จาก css เป็น scss

135

ฉันได้อ่านเอกสารซึ่งระบุว่าหากฉันต้องการใช้scssฉันต้องรันคำสั่งต่อไปนี้:

ng set defaults.styleExt scss

แต่เมื่อฉันทำและสร้างไฟล์นั้นฉันยังคงได้รับข้อผิดพลาดนี้ในคอนโซลของฉัน:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
css  angular  sass  angular6  angular-cli 
— เจมี่
แหล่งที่มา
1
ซึ่งจะใช้ได้กับไฟล์ที่คุณสร้างจากจุดนั้นเท่านั้นฉันไม่คิดว่ามันจะแก้ไขไฟล์ที่คุณมีอยู่แล้ว หากคุณgit diffจะเห็นสิ่งที่เปลี่ยนแปลงไป
— jonrsharpe
แต่ฉันยังไม่มีไฟล์ แค่ต้องการเปลี่ยน.
— Jamie
คุณยังไม่มีไฟล์ได้อย่างไร หากคุณกำลังสร้างโปรเจ็กต์ใหม่ทำไมคุณถึงกำหนดค่าแบบนั้น
— jonrsharpe
เริ่มต้นด้วย angular2 ฉันพยายามคิดออกทั้งหมด
— Jamie
1
หากคุณกำลังสร้างโครงการใหม่ไม่ตามที่ปรากฏในเอกสารng new whatever --style=scss อย่าทำตามคำแนะนำในการกำหนดค่าโครงการที่มีอยู่หากนั่นไม่ใช่สิ่งที่คุณกำลังทำอยู่!
— jonrsharpe

คำตอบ:

267

สำหรับ Angular 6โปรดตรวจสอบเอกสารอย่างเป็นทางการ

หมายเหตุ:สำหรับ@angular/cliเวอร์ชันที่เก่ากว่าจะ6.0.0-beta.6ใช้ng setแทนng configไฟล์.

สำหรับโครงการที่มีอยู่

ในโปรเจ็กต์ angular-cli ที่มีอยู่ซึ่งตั้งค่าด้วยcssสไตล์เริ่มต้นคุณจะต้องทำบางสิ่ง:

  1. เปลี่ยนนามสกุลสไตล์เริ่มต้นเป็น scss

เปลี่ยนด้วยตนเองใน.angular-cli.json(Angular 5.x และเก่ากว่า) หรือangular.json(Angular 6+) หรือเรียกใช้:

ng config defaults.styleExt=scss

หากคุณได้รับข้อผิดพลาด: Value cannot be found.ใช้คำสั่ง:

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

(* ที่มา: ตัวเลือก Angular CLI SASS )

  1. เปลี่ยนชื่อ.cssไฟล์ที่มีอยู่ของคุณเป็น.scss(เช่น styles.css และ app / app.component.css)

  2. ชี้ CLI เพื่อค้นหา styles.scss

เปลี่ยนนามสกุลไฟล์ด้วยตนเองapps[0].stylesในangular.json

  1. ชี้ส่วนประกอบเพื่อค้นหาไฟล์รูปแบบใหม่ของคุณ

เปลี่ยนstyleUrlsส่วนประกอบในของคุณให้ตรงกับชื่อไฟล์ใหม่ของคุณ

สำหรับโครงการในอนาคต

ดังที่ @Serginho กล่าวถึงคุณสามารถตั้งค่าส่วนขยายสไตล์เมื่อเรียกใช้ng newคำสั่ง

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

หากคุณต้องการตั้งค่าเริ่มต้นสำหรับโปรเจ็กต์ทั้งหมดที่คุณสร้างในอนาคตให้รันคำสั่งต่อไปนี้:

ng config --global defaults.styleExt=scss
— เก๋
แหล่งที่มา
6
แก้ไข: ฉันแค่ต้องการรีเฟรชตัวสร้างแบบเรียลไทม์ ทำงานได้อย่างถูกต้อง
— Cristian Traìna
1
@ angular / cli 1.7.3: การเปลี่ยนค่าเริ่มต้นstyleExt from cssto scssin .angular-cli.jsonจะสร้างไฟล์ scss โดยอัตโนมัติสำหรับทุกองค์ประกอบใหม่ที่สร้างขึ้นในอนาคต
— SimonHawesome
4
ng ตั้งค่า default.styleExt scss สำหรับโครงการที่มีอยู่
— smedasn
9
สำหรับ angular 6 ตามนี้github.com/angular/angular-cli/wiki/stories-css-preprocessors
— hamilton.lima
22
@chovy สำหรับเวอร์ชัน cli เชิงมุมล่าสุดในกรณีของฉัน (6.0.7) ใช้คำสั่งนี้สำหรับโครงการที่มีอยู่: ng config schematics.@schematics/angular:component.styleext scss ตามที่บอกโดย @ hamilton.lima
— Farhan
52

จาก ng6 สิ่งนี้สามารถทำได้โดยเพิ่มรหัสต่อไปนี้angular.jsonที่ระดับรูท:

เปลี่ยนด้วยตนเองใน.angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
— Jose Orihuela
แหล่งที่มา
ฉันschematicsไม่ได้อยู่ในระดับรูท แต่อยู่ในโปรเจ็กต์ของฉันในangular.json. ฉันควรเพิกเฉยและเพิ่มสิ่งนี้ที่ระดับรากแทนหรือไม่
— mcheah
1
@mcheah ใช่นั่นเป็นวิธีการตั้งค่าของฉันเช่นกันและมันก็ใช้งานได้
— Eric Soyke
ฉันทิ้งของฉันไว้ในโครงการและดูเหมือนว่าจะใช้งานได้ดีเช่นเดียวกับ FYI สำหรับทุกคนที่มีคำถามเดียวกัน
— mcheah
หลังจากอัปเดตเป็นเวอร์ชันล่าสุดของ ng6 schematicsตอนนี้ฉันก็ถูกซ้อนกันเช่นกัน
— Jose Orihuela
นั่นดูเหมือนจะไม่เปลี่ยนแปลงอะไรสำหรับฉัน ยังไม่ประมวลผลกฎ scss ในไฟล์. css
— chovy
34

เปิดไฟล์angular.json

1. เปลี่ยนจาก

"schematics": {}

ถึง

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. เปลี่ยนจาก (สองที่)

"src/styles.css"

ถึง

"src/styles.scss"

จากนั้นตรวจสอบและเปลี่ยนชื่อ.cssไฟล์ทั้งหมดและอัปเดตองค์ประกอบไฟล์ styleUrls จาก.css to .scss

— BALA
แหล่งที่มา
4
ขั้นตอนที่ 1 สามารถทำได้จาก CLI: ng config schematics.@schematics/angular:component.styleext scss ตามที่ระบุไว้ในเอกสารอย่างเป็นทางการ: github.com/angular/angular-cli/wiki/stories-css-preprocessors
— Marian07
13

สำหรับ Angular 6

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

หมายเหตุ: @ schematics / angular เป็นแผนผังเริ่มต้นสำหรับ Angular CLI

— Franklin Pious
แหล่งที่มา
11

การรวมตัวประมวลผลล่วงหน้า CSS สำหรับ Angular CLI: 6.0.3

เมื่อสร้างโปรเจ็กต์ใหม่คุณยังสามารถกำหนดส่วนขยายที่คุณต้องการสำหรับไฟล์สไตล์:

ng new sassy-project --style=sass

หรือตั้งค่าสไตล์เริ่มต้นในโครงการที่มีอยู่:

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

เอกสาร Angular CLI สำหรับตัวประมวลผลล่วงหน้า CSS ที่สำคัญทั้งหมด

— Angel Roma
แหล่งที่มา
1
Invalid JSON character: "s" at 0:0.
— chovy
ในฐานะของเชิงมุม CLI 6.0.8 ng config(ข้างต้น) เป็นวิธีที่ดีที่สุด แต่คุณยังคงต้องเปลี่ยนชื่อ*.cssไฟล์ไป*.scssและแทนที่อ้างอิงในการangular.jsonที่จะstyle.cssมีstyle.scssและปรับปรุงอ้างอิงไฟล์ทั้งหมดองค์ประกอบในstyleUrlsสถานที่ให้บริการกับชื่อใหม่ ... ก็ใช้ได้ดีมาก!
— gkl
8

สำหรับโครงการที่มีอยู่ :

ในangular.jsonไฟล์

  1. ในbuildบางส่วนและtestบางส่วนแทนที่:

    "styles": ["src/styles.css"], โดย "styles": ["src/styles.scss"],

  2. แทนที่:

    "schematics": {}, โดย "schematics": { "@schematics/angular:component": { "style": "scss" } },

การใช้ng config schematics.@schematics/angular:component.styleext scssคำสั่งใช้งานได้ แต่ไม่ได้วางการกำหนดค่าไว้ที่เดียวกัน

ในโครงการของคุณเปลี่ยนชื่อ.cssไฟล์ของคุณเป็น.scss

สำหรับโปรเจ็กต์ใหม่คำสั่งนี้จะทำงานทั้งหมด:

ng n project-name --style=scss

สำหรับการกำหนดค่าส่วนกลาง

เวอร์ชันใหม่ดูเหมือนจะไม่มีคำสั่งส่วนกลาง

— veben
แหล่งที่มา
3

สำหรับผู้ใช้ส่วนขยาย Nrwlที่เจอเธรดนี้: คำสั่งทั้งหมดถูกดักจับโดย Nx (เช่นng generate component myCompent) แล้วส่งต่อไปยัง AngularCLI

คำสั่งเพื่อให้ SCSS ทำงานในพื้นที่ทำงาน Nx:

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

— Tilo
แหล่งที่มา
ยอดเยี่ยมกำลังมองหาสิ่งนี้ ขอบคุณ!
— Ruan Petersen
2

สามารถใช้การเปลี่ยนแปลงพลังเดรัจฉานได้ สิ่งนี้จะเปลี่ยนได้ แต่เป็นกระบวนการที่ยาวนานกว่า

ไปที่โฟลเดอร์แอพsrc / app

  1. เปิดไฟล์นี้app.component.ts

  2. เปลี่ยนรหัสนี้styleUrls: ['./app.component.css']เป็นstyleUrls: ['./app.component.scss']

  3. บันทึกและปิด

ในโฟลเดอร์เดียวกันsrc / app

  1. เปลี่ยนชื่อนามสกุลสำหรับไฟล์ app.component.css เป็น(app.component.scss)

  2. ติดตามการเปลี่ยนแปลงนี้สำหรับส่วนประกอบอื่น ๆ ทั้งหมด (เช่นบ้านเกี่ยวกับที่ติดต่อ ฯลฯ ... )

angular.jsonแฟ้มการกำหนดค่าที่อยู่ถัดไป มันอยู่ที่รูทโปรเจ็กต์

  1. ค้นหาและแทนที่การเปลี่ยนแปลง CSS มัน(SCSS)

  2. บันทึกและปิด

สุดท้ายรีสตาร์ทng serve -oไฟล์.

หากคอมไพเลอร์บ่นคุณให้ทำตามขั้นตอนอีกครั้ง

อย่าลืมทำตามขั้นตอนในapp / srcอย่างใกล้ชิด

— แฟรงค์เถิน
แหล่งที่มา
1

ใน Angular เวอร์ชันล่าสุด (v9) จำเป็นต้องเพิ่มโค้ดด้านล่าง angular.json

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

สามารถเพิ่มได้โดยใช้คำสั่งต่อไปนี้:

ng config schematics.@schematics/angular:component.style scss
— พาร์ธารันจัน
แหล่งที่มา
ไม่ได้ผลสำหรับฉันและฉันกำลังพยายามทำมันเกิน 10
— Kross
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.