ฉันใหม่กับ Angular และฉันมาจากชุมชน Ember กำลังพยายามใช้ Angular-CLI ใหม่ซึ่งอ้างอิงจาก Ember-CLI

ฉันจำเป็นต้องรู้วิธีที่ดีที่สุดในการจัดการ SASS ในโครงการ Angular ใหม่ ฉันลองใช้ember-cli-sassrepo เพื่อดูว่ามันจะเล่นได้หรือไม่เนื่องจากส่วนประกอบหลักจำนวนมากของ Angular-CLI นั้นไม่ทำงานในโมดูล Ember-CLI

มันใช้งานไม่ได้ แต่ก็ไม่แน่ใจอีกต่อไปหากฉันเพิ่งกำหนดค่าบางอย่างผิดพลาด

นอกจากนี้วิธีที่ดีที่สุดในการจัดระเบียบสไตล์ในโครงการแองกูลาร์ใหม่คืออะไร มันจะดีถ้ามีไฟล์ sass ในโฟลเดอร์เดียวกับคอมโพเนนต์

เชิงมุม CLI รุ่นที่ 9 (ใช้ในการสร้างเชิงมุม 9 โครงการ) ตอนนี้หยิบขึ้นมาจากแผนงานแทนstyle styleextใช้คำสั่งดังนี้:
ng config schematics.@schematics/angular:component.style scss
แล้วangular.json ที่ได้จะเป็นแบบนี้

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

โซลูชันและคำอธิบายอื่น ๆ ที่เป็นไปได้:

ในการสร้างโครงการใหม่ด้วย angular CLIพร้อมการสนับสนุน sass ลองทำสิ่งนี้:

ng new My_New_Project --style=scss 

นอกจากนี้คุณยังสามารถใช้--style=sass& หากคุณไม่ทราบความแตกต่างให้อ่านบทความสั้น ๆ ง่าย ๆนี้และถ้าคุณยังไม่รู้ก็แค่ไปกับscssการเรียนรู้ต่อไป

หากคุณมีโครงการเชิงมุม 5 ให้ใช้คำสั่งนี้เพื่ออัปเดตการกำหนดค่าสำหรับโครงการของคุณ

ng set defaults.styleExt scss

สำหรับรุ่นล่าสุด

สำหรับ Angular 6 เพื่อกำหนดสไตล์ใหม่ให้กับโครงการที่มีอยู่ด้วย CLI:

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

หรือโดยตรงเข้าไปใน angular.json:

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

อัปเดตสำหรับ Angular 6+

1. โครงการใหม่

   เมื่อสร้างโครงการใหม่ด้วย Angular CLI ให้ระบุตัวประมวลผลล่วงหน้า css เป็น

   • ใช้ไวยากรณ์ SCSS

     ng new sassy-project --style=scss
     

   • ใช้ไวยากรณ์ SASS

     ng new sassy-project --style=sass
     

2. กำลังอัปเดตโครงการที่มีอยู่

   กำหนดรูปแบบเริ่มต้นในโครงการที่มีอยู่โดยการเรียกใช้

   • ใช้ไวยากรณ์ SCSS

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

   • ใช้ไวยากรณ์ SASS

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

   คำสั่งดังกล่าวจะอัปเดตไฟล์พื้นที่ทำงานของคุณ (angular.json) ด้วย

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

   ที่styleextสามารถเป็นได้ทั้งscssหรือsassตามทางเลือก

คำตอบเดิม(สำหรับเชิงมุม <6)

โครงการใหม่

สำหรับโครงการใหม่เราสามารถตั้งค่าตัวเลือก--style=sassหรือ--style=scssตามรสชาติที่ต้องการ SASS / SCSS

• ใช้ไวยากรณ์ SASS

  ng new project --style=sass 
  

• ใช้ไวยากรณ์ SCSS

  ng new project --style=scss 
  

แล้วติดตั้งnode-sass,

npm install node-sass --save-dev

การอัพเดตโครงการที่มีอยู่

ในangular-cliการรวบรวมไฟล์ sass ด้วยnode-sassฉันต้องเรียกใช้

npm install node-sass --save-dev 

node-sassซึ่งการติดตั้ง แล้วก็

• สำหรับไวยากรณ์ SASS

  ng set defaults.styleExt sass
  

• สำหรับไวยากรณ์ SCSS

  ng set defaults.styleExt scss
  

เพื่อตั้งค่าเริ่มต้น styleExt เพื่อ sass

(หรือ)

เปลี่ยนstyleExtไปsassหรือscssไวยากรณ์ที่ต้องการใน.angular-cli.json,

• สำหรับไวยากรณ์ SASS

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

• สำหรับไวยากรณ์ 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 

ซึ่งได้รับการแก้ไขโดยการเปลี่ยนสายของ.angular-cli.json,

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

เพื่อทั้ง

• สำหรับไวยากรณ์ SASS

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

• สำหรับไวยากรณ์ SCSS

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

อ้างจากเจ้าหน้าที่ github repo ที่นี่ -

หากต้องการใช้เพียงแค่ติดตั้งตัวอย่างเช่น

npm install node-sass

และเปลี่ยนชื่อไฟล์. css ในโครงการของคุณเป็น. scss หรือ. sass พวกเขาจะถูกรวบรวมโดยอัตโนมัติ อาร์กิวเมนต์ตัวเลือกของ Angular2App มีตัวเลือก sassCompiler, lessCompiler, stylusCompiler และ compassCompiler ที่ส่งโดยตรงไปยังตัวประมวลผล CSS ล่วงหน้าของตน

ดูที่นี่

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

บอกให้เชิงมุม cli ใช้ scss ตามค่าเริ่มต้นเสมอ

เพื่อหลีกเลี่ยงการผ่าน--style scssแต่ละครั้งที่คุณสร้างโครงการคุณอาจต้องการปรับการกำหนดค่าเริ่มต้นของ angular-cli ทั่วโลกด้วยคำสั่งต่อไปนี้:

ng set --global defaults.styleExt scss

โปรดทราบว่าบางรุ่นของ angular-cli มีข้อบกพร่องที่มีการอ่านธงทั่วโลกด้านบน ( ดูลิงค์ ) หากเวอร์ชันของคุณมีบั๊กนี้ให้สร้างโครงการของคุณด้วย:

ng new some_project_name --style=scss

วิธีที่ดีที่สุดในการใช้ scss คือการสร้างโครงการด้วยตัวเลือกดังกล่าว:

ng new My_New_Project --style=scss 

Angular-cli ยังเพิ่มตัวเลือกในการเปลี่ยนตัวประมวลผลล่วงหน้า css เริ่มต้นหลังจากที่โครงการถูกสร้างขึ้นโดยใช้คำสั่ง:

ng set defaults.styleExt scss

สำหรับข้อมูลเพิ่มเติมคุณสามารถดูที่นี่สำหรับเอกสารของพวกเขา:

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

ฉันสังเกตเห็น gotcha ที่น่ารำคาญมากในการย้ายไปยังไฟล์ scss !!! หนึ่งต้องย้ายจากง่าย: styleUrls: ['app.component.scss']เพื่อstyleUrls: ['./app.component.scss'](เพิ่ม./) ในapp.component.ts

มี ng ใดที่ทำเมื่อคุณสร้างโครงการใหม่ แต่ดูเหมือนจะไม่เมื่อสร้างโครงการเริ่มต้น หากคุณเห็นการแก้ไขข้อผิดพลาดระหว่างการสร้างให้ตรวจสอบปัญหานี้ ใช้เวลาแค่ฉัน ~ 1 ชั่วโมง

ดีที่สุดอาจเป็น ng new myApp --style=scss

จากนั้นAngular CLIจะสร้างส่วนประกอบใหม่พร้อมscssให้คุณ ...

โปรดทราบว่าการใช้งานscssไม่ได้ในเบราว์เซอร์อย่างที่คุณอาจทราบ .. ดังนั้นเราจึงต้องการบางสิ่งบางอย่างในการรวบรวมcssด้วยเหตุนี้เราจึงสามารถใช้node-sassติดตั้งได้ดังด้านล่าง:

npm install node-sass --save-dev

และคุณควรจะไปดี!

หากคุณใช้ webpack ให้อ่านที่นี่:

บรรทัดคำสั่งในโฟลเดอร์โครงการที่ package.json ปัจจุบันของคุณคือ: npm install node-sass sass-loader raw-loader --save-dev

ในwebpack.common.jsค้นหา "rules:" และเพิ่มออบเจ็กต์นี้ที่ท้ายอาร์เรย์อาเรย์ (อย่าลืมเพิ่มคอมมาที่ท้ายของออบเจกต์ก่อนหน้า):

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

จากนั้นในองค์ประกอบของคุณ:

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

หากคุณต้องการการสนับสนุน CSS ทั่วโลกจากนั้นในองค์ประกอบระดับบนสุด (น่าจะเป็น app.component.ts) ลบการห่อหุ้มและรวมถึง SCSS:

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

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

จากเริ่มต้นเชิงมุมที่นี่

ng set --global defaults.styleExt=scssเลิกใช้แล้วตั้งแต่ ng6 คุณจะได้รับข้อความนี้:

get / set เลิกใช้แล้วในความโปรดปรานของคำสั่ง config

คุณควรใช้:

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

หากคุณต้องการกำหนดเป้าหมายโครงการเฉพาะ (แทนที่ {project} ด้วยชื่อโครงการของคุณ):

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

Angular-CLI เป็นวิธีที่แนะนำและเป็นมาตรฐานในชุมชน Angular 2+

สร้างโครงการใหม่ด้วย SCSS

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

แปลงโครงการที่มีอยู่ (CLI น้อยกว่า v6)

ng set defaults.styleExt scss

(ต้องเปลี่ยนชื่อไฟล์. css ทั้งหมดด้วยตนเองด้วยวิธีนี้อย่าลืมเปลี่ยนชื่อในไฟล์คอมโพเนนต์ของคุณ)

แปลงโครงการที่มีอยู่ (CLI มากกว่า v6)

1. เปลี่ยนชื่อไฟล์ CSS ทั้งหมดเป็น SCSS และอัปเดตส่วนประกอบที่อ้างอิง
2. เพิ่มสิ่งต่อไปนี้ในคีย์ "schematics" ของ angular.json (โดยปกติคือบรรทัดที่ 11):

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

สำหรับAngular 9.0และสูงกว่าให้อัพเดต"schematics":{}อ็อบเจ็กต์ในไฟล์angular.jsonดังนี้:

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

ต่อไปนี้ควรทำงานในโครงการ CLI 6 เชิงมุม คือถ้าคุณได้รับ:

get / set เลิกใช้แล้วในความโปรดปรานของคำสั่ง config

npm install node-sass --save-dev

จากนั้น ( ให้แน่ใจว่าคุณเปลี่ยนชื่อโครงการ )

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

ในการรับชื่อโปรเจ็กต์เริ่มต้นให้ใช้:

ng config defaultProject

อย่างไรก็ตาม: หากคุณโอนย้ายโครงการของคุณจาก <6 ถึงเชิงมุม 6 มีโอกาสที่ดีที่การกำหนดค่าจะไม่อยู่ที่นั่น ในกรณีนี้คุณอาจได้รับ:

อักขระ JSON ไม่ถูกต้อง: "s" ที่ 0: 0

ดังนั้นangular.jsonจำเป็นต้องแก้ไขด้วยตนเอง

คุณจะต้องการให้มันเป็นแบบนี้ (จดบันทึกคุณสมบัติ styleex):

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

ดูเหมือนว่าสคีมาที่ซับซ้อนเกินไปสำหรับฉัน _ (ツ) _ / ¯

ตอนนี้คุณจะต้องไปและเปลี่ยนไฟล์ css / less ทั้งหมดของคุณให้เป็น scss และอัปเดตการอ้างอิงใด ๆ ในส่วนประกอบอื่น ๆ แต่คุณควรจะไปได้ดี

ตั้งแต่วันที่ 3/10/2562 Anguar ได้ยกเลิกการสนับสนุนเขื่อง ไม่มีตัวเลือกอะไรที่คุณส่งไป--styleเมื่อใช้งานng newคุณจะได้รับ.scssไฟล์ที่สร้างขึ้น มันเป็นความอัปยศที่การสนับสนุนเขื่องถูกทิ้งโดยไม่มีคำอธิบายใด ๆ

ตั้งเป็นค่าเริ่มต้นสากล

ng set defaults.styleExt=scss --global

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

ในการใช้ตัวประมวลผลล่วงหน้าเหล่านี้เพียงเพิ่มไฟล์ลงใน styleUrl ของคอมโพเนนต์ของคุณ:

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

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

ng new sassy-project --style=sass

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

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

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

สตริงสไตล์ที่เพิ่มให้กับอาร์เรย์ @ Component.styles ต้องเขียนใน CSS เนื่องจาก CLI ไม่สามารถใช้ตัวประมวลผลล่วงหน้ากับสไตล์อินไลน์

ขึ้นอยู่กับเอกสารเชิงมุม https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

ฉันพยายามอัพเดตโครงการของฉันเพื่อใช้ sass โดยใช้คำสั่งนี้

ตั้งค่าเริ่มต้นสไตล์ออก scss

แต่ได้สิ่งนี้

get / set เลิกใช้แล้วในความโปรดปรานของคำสั่ง config

• CLI เชิงมุม: 6.0.7
• โหนด: 8.9.0
• ระบบปฏิบัติการ: linux x64
• เชิงมุม: 6.0.3

ดังนั้นฉันจึงลบโครงการของฉัน (เมื่อฉันเพิ่งเริ่มต้นและไม่มีรหัสในโครงการของฉัน) และสร้างโครงการใหม่ด้วย sass ตั้งไว้ในขั้นต้น

ใหม่ my-sassy-app --style = scss

แต่ฉันจะขอบคุณถ้ามีคนสามารถแบ่งปันวิธีการปรับปรุงโครงการที่มีอยู่ว่าจะดี

ขั้นตอนที่ 1. ติดตั้งแพ็คเกจ bulma โดยใช้ NPM

npm install --save bulma

ขั้นตอนที่ 2. เปิด angular.json และอัปเดตรหัสต่อไปนี้

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

แค่นั้นแหละ.

เพื่อให้เครื่องมือของ Bulma ง่ายขึ้นให้เพิ่ม stylePreprocessorOptions เข้ากับ angular.json

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

BULMA + ANGULAR 6