Angular-cli từ css đến scss

Tôi đã đọc tài liệu , nói rằng nếu tôi muốn sử dụngscss tôi phải chạy lệnh sau:

ng set defaults.styleExt scss

Nhưng khi tôi làm điều đó và tạo tập tin đó, tôi vẫn nhận được lỗi này trong bảng điều khiển của mình:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Đối với Angular 6, hãy kiểm tra tài liệu chính thức

Lưu ý: Đối với @angular/clicác phiên bản cũ hơn 6.0.0-beta.6sử dụng ng setthay thế ng config.

Đối với các dự án hiện có

Trong một dự án angular-cli hiện có được thiết lập với các csskiểu mặc định, bạn sẽ cần thực hiện một số điều:

1. Thay đổi phần mở rộng kiểu mặc định thành scss

Thay đổi thủ công trong .angular-cli.json(Angular 5.x trở lên) hoặc angular.json(Angular 6+) hoặc chạy:

ng config defaults.styleExt=scss

nếu bạn gặp lỗi: Value cannot be found.sử dụng lệnh:

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

(* nguồn: Tùy chọn CLI SASS góc )

2. Đổi tên các .csstệp hiện có của bạn thành.scss (ví dụ: style.css và app / app.component.css)

3. Trỏ CLI để tìm style.scss

Thay đổi thủ công các phần mở rộng tập tin apps[0].stylestrongangular.json

4. Trỏ các thành phần để tìm tệp kiểu mới của bạn

Thay đổi styleUrlsthành phần của bạn để khớp với tên tệp mới của bạn

Đối với các dự án trong tương lai

Như @Serginho đã đề cập, bạn có thể đặt tiện ích mở rộng kiểu khi chạy ng newlệnh

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

Nếu bạn muốn đặt mặc định cho tất cả các dự án bạn tạo trong tương lai, hãy chạy lệnh sau:

ng config --global defaults.styleExt=scss

Kể từ ng6, điều này có thể được thực hiện với đoạn mã sau được thêm vào angular.jsonở cấp gốc:

Thay đổi thủ công trong .angular.json:

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

Mở tệp angular.json

1. trao đổi từ

"schematics": {}

đến

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

2. thay đổi từ (tại hai nơi)

"src/styles.css"

đến

"src/styles.scss"

sau đó kiểm tra và đổi tên tất cả .csscác tệp và cập nhật tệp thành phần.ts styleUrls từ.css to .scss

Đối với góc 6,

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

lưu ý: @ sơ đồ / góc là sơ đồ mặc định cho CLI góc

Tích hợp CSS tiền xử lý cho Angular CLI: 6.0.3

Khi tạo dự án mới, bạn cũng có thể xác định tiện ích mở rộng nào bạn muốn cho tệp kiểu:

ng new sassy-project --style=sass

Hoặc đặt kiểu mặc định cho một dự án hiện có:

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

Tài liệu CLI góc cho tất cả các bộ tiền xử lý CSS chính

Đối với các dự án hiện có :

Trong angular.jsontập tin

1. Một buildphần và testmột phần, thay thế:

   "styles": ["src/styles.css"], bởi "styles": ["src/styles.scss"],

2. Thay thế:

   "schematics": {}, bởi "schematics": { "@schematics/angular:component": { "style": "scss" } },

Sử dụng ng config schematics.@schematics/angular:component.styleext scsslệnh hoạt động nhưng nó không đặt cấu hình ở cùng một nơi.

Trong dự án của bạn đổi tên các .csstập tin của bạn thành.scss

Đối với một dự án mới , lệnh này thực hiện tất cả công việc:

ng n project-name --style=scss

Đối với cấu hình toàn cầu

Các phiên bản mới dường như không có lệnh toàn cầu

Sử dụng lệnh:

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

Trong ng6 bạn cần sử dụng lệnh này, theo một bài tương tự :

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

Đối với người dùng tiện ích mở rộng Nrwl gặp chủ đề này: tất cả các lệnh đều bị chặn bởi Nx (ví dụ:ng generate component myCompent :) và sau đó được chuyển xuống AngularCLI.

Lệnh để SCSS hoạt động trong không gian làm việc Nx:

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

Một sự thay đổi lực lượng vũ phu có thể được áp dụng. Điều này sẽ làm việc để thay đổi, nhưng đó là một quá trình lâu hơn.

Chuyển đến thư mục ứng dụng src / app

1. Mở tệp này: app.component.ts

2. Thay đổi mã này styleUrls: ['./app.component.css']thànhstyleUrls: ['./app.component.scss']

3. Lưu và đóng.

Trong cùng thư mục src / app

1. Đổi tên phần mở rộng cho tệp app.component.css thành (app.component.scss)

2. Thực hiện theo thay đổi này cho tất cả các thành phần khác. (ví dụ: nhà, về, liên hệ, v.v ...)

Các angular.json tập tin cấu hình là tới. Nó nằm ở gốc dự án.

1. Tìm kiếm và Thay thế css thay đổi nó thành (scss) .

2. Lưu và đóng.

Cuối cùng, Khởi động lại của bạn ng serve -o.

Nếu trình biên dịch phàn nàn với bạn, hãy thực hiện lại các bước.

Đảm bảo theo sát các bước trong app / src .

Trong phiên bản mới nhất của Angular (v9), bên dưới mã cần thêm vào angular.json

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

Có thể được thêm bằng lệnh sau:

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