Tôi mới đến Angular và tôi đến từ cộng đồng Ember. Cố gắng sử dụng Angular-CLI mới dựa trên Ember-CLI.

Tôi cần biết cách tốt nhất để xử lý SASS trong một dự án Angular mới. Tôi đã thử sử dụng ember-cli-sassrepo để xem nó có hoạt động không vì một số thành phần cốt lõi của Angular-CLI đã hết các mô-đun Ember-CLI.

Nó không hoạt động nhưng một lần nữa không chắc chắn nếu tôi chỉ cấu hình sai một cái gì đó.

Ngoài ra, cách tốt nhất để tổ chức các phong cách trong một dự án Angular mới là gì? Sẽ rất tuyệt nếu có tệp sass trong cùng thư mục với thành phần.

Angular CLI phiên bản 9 (được sử dụng để tạo các dự án Angular 9) bây giờ lấy styletừ sơ đồ thay vì styleext. Sử dụng lệnh như thế này:
ng config schematics.@schematics/angular:component.style scss
và angular.json kết quả sẽ trông như thế này

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

Các giải pháp & giải thích khả thi khác:

Để tạo một dự án mới với CLI góc cạnh với sự hỗ trợ sass, hãy thử điều này:

ng new My_New_Project --style=scss 

Bạn cũng có thể sử dụng --style=sass& nếu bạn không biết sự khác biệt, hãy đọc bài viết ngắn & dễ dàng này và nếu bạn vẫn không biết, chỉ cần tiếp tục scssvà tiếp tục học hỏi.

Nếu bạn có một dự án 5 góc, sử dụng lệnh này để cập nhật cấu hình cho dự án của bạn.

ng set defaults.styleExt scss

Dành cho phiên bản mới nhất

Đối với Angular 6 để thiết lập phong cách mới cho dự án hiện có với CLI:

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

Hoặc trực tiếp vào angular.json:

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

Cập nhật cho Angular 6+

1. Dự án mới

   Khi tạo dự án mới với Angular CLI, chỉ định bộ xử lý trước css là

   • Sử dụng cú pháp SCSS

     ng new sassy-project --style=scss
     

   • Sử dụng cú pháp SASS

     ng new sassy-project --style=sass
     

2. Cập nhật dự án hiện có

   Đặt kiểu mặc định cho một dự án hiện có bằng cách chạy

   • Sử dụng cú pháp SCSS

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

   • Sử dụng cú pháp SASS

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

   Lệnh trên sẽ cập nhật tệp không gian làm việc của bạn (angular.json) với

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

   nơi styleextcó thể scsshoặc sasstheo sự lựa chọn.

Câu trả lời gốc (cho Angular <6)

Dự án mới

Đối với các dự án mới, chúng tôi có thể đặt các tùy chọn --style=sasshoặc --style=scsstheo SASS / SCSS hương vị mong muốn

• Sử dụng cú pháp SASS

  ng new project --style=sass 
  

• Sử dụng cú pháp SCSS

  ng new project --style=scss 
  

sau đó cài đặt node-sass,

npm install node-sass --save-dev

Cập nhật các dự án hiện có

Để thực hiện angular-cliđể biên dịch các tệp sass với node-sass, tôi đã phải chạy,

npm install node-sass --save-dev 

mà cài đặt node-sass. Sau đó

• cho cú pháp SASS

  ng set defaults.styleExt sass
  

• cho cú pháp SCSS

  ng set defaults.styleExt scss
  

để đặt styleExt mặc định thành sass

(hoặc là)

thay đổi styleExtthành sasshoặc scsscho cú pháp mong muốn trong .angular-cli.json,

• cho cú pháp SASS

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

• cho cú pháp 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 

đã được sửa bằng cách thay đổi các dòng của .angular-cli.json,

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

để một trong hai

• cho cú pháp SASS

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

• cho cú pháp SCSS

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

Trích dẫn từ các quan chức github repo ở đây -

Để sử dụng một chỉ cần cài đặt chẳng hạn

npm install node-sass

và đổi tên các tệp .css trong dự án của bạn thành .scss hoặc .sass. Chúng sẽ được biên dịch tự động. Đối số tùy chọn của Angular2App có các tùy chọn sassCompiler, lessCompiler, stylusCompiler và CompassCompiler được truyền trực tiếp đến các bộ tiền xử lý CSS tương ứng của chúng.

Xem tại đây

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

Nói với angular-cli để luôn sử dụng scss theo mặc định

Để tránh vượt qua --style scssmỗi lần bạn tạo dự án, bạn có thể muốn điều chỉnh cấu hình mặc định của angular-cli trên toàn cầu, bằng lệnh sau:

ng set --global defaults.styleExt scss

Xin lưu ý rằng một số phiên bản của angular-cli có lỗi khi đọc cờ toàn cầu ở trên ( xem liên kết ). Nếu phiên bản của bạn có lỗi này, hãy tạo dự án của bạn với:

ng new some_project_name --style=scss

Giống như Mertcan đã nói, cách tốt nhất để sử dụng scss là tạo dự án với tùy chọn đó:

ng new My_New_Project --style=scss 

Angular-cli cũng thêm một tùy chọn để thay đổi bộ tiền xử lý css mặc định sau khi dự án được tạo bằng cách sử dụng lệnh:

ng set defaults.styleExt scss

Để biết thêm thông tin bạn có thể xem tài liệu của họ ở đây:

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

Tôi nhận thấy một gotcha rất anoying trong việc chuyển sang tập tin scss !!! Một PHẢI chuyển từ đơn giản: styleUrls: ['app.component.scss']sang styleUrls: ['./app.component.scss'](thêm ./) vàoapp.component.ts

Bạn sẽ làm gì khi bạn tạo một dự án mới, nhưng dường như không phải khi dự án mặc định được tạo. Nếu bạn thấy giải quyết lỗi trong quá trình xây dựng, hãy kiểm tra vấn đề này. Tôi chỉ mất ~ 1 giờ.

Tốt nhất có thể là ng new myApp --style=scss

Sau đó, Angular CLI sẽ tạo bất kỳ thành phần mới nào với scss cho bạn ...

Lưu ý rằng việc sử dụng scsskhông hoạt động trong trình duyệt như bạn có thể biết .. vì vậy chúng tôi cần một cái gì đó để biên dịch nó css, vì lý do này chúng tôi có thể sử dụng node-sass, cài đặt nó như dưới đây:

npm install node-sass --save-dev

và bạn nên đi thật tốt!

Nếu bạn sử dụng webpack, hãy đọc ở đây:

Dòng lệnh bên trong thư mục dự án nơi gói.j.j hiện tại của bạn là: npm install node-sass sass-loader raw-loader --save-dev

Trong webpack.common.js, tìm kiếm "quy tắc:" và thêm đối tượng này vào cuối mảng quy tắc (đừng quên thêm dấu phẩy vào cuối đối tượng trước đó):

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

Sau đó, trong thành phần của bạn:

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

Nếu bạn muốn hỗ trợ CSS toàn cầu thì trên thành phần cấp cao nhất (có thể là app.component.ts) sẽ loại bỏ đóng gói và bao gồm SCSS:

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

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

từ Angular starter đây .

ng set --global defaults.styleExt=scssbị phản đối kể từ ng6. Bạn sẽ nhận được thông báo này:

get / set đã không được dùng trong lệnh config

Bạn nên sử dụng:

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

Nếu bạn muốn nhắm mục tiêu một dự án cụ thể (thay thế {dự án} bằng tên dự án của bạn):

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

Angular-CLI là phương pháp được đề xuất và là tiêu chuẩn trong cộng đồng Angular 2+.

Một dự án mới với SCSS

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

Chuyển đổi một dự án hiện có (CLI nhỏ hơn v6)

ng set defaults.styleExt scss

(phải đổi tên tất cả các tệp .css theo cách thủ công với phương pháp này, đừng quên đổi tên trong các tệp thành phần của bạn)

Chuyển đổi một dự án hiện có (CLI lớn hơn v6)

1. đổi tên tất cả các tệp CSS thành SCSS và cập nhật các thành phần tham chiếu chúng.
2. thêm phần sau vào khóa "sơ đồ" của angular.json (thường là dòng 11):

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

Đối với Angular 9.0 trở lên, hãy cập nhật "schematics":{}đối tượng trong tệp angular.json như thế này:

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

Sau đây nên làm việc trong một dự án CLI 6 góc cạnh. Tức là nếu bạn đang nhận được:

get / set đã không được dùng trong lệnh config.

npm install node-sass --save-dev

Sau đó ( đảm bảo bạn thay đổi tên dự án )

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

Để có được tên dự án mặc định của bạn, hãy sử dụng:

ng config defaultProject

Tuy nhiên: Nếu bạn đã di chuyển dự án của mình từ <6 đến góc 6 thì rất có thể cấu hình sẽ không ở đó. Trong trường hợp bạn có thể nhận được:

Ký tự JSON không hợp lệ: "s" tại 0: 0

Do đó, một chỉnh sửa thủ công angular.jsonsẽ được yêu cầu.

Bạn sẽ muốn nó trông giống như thế này (lưu ý đến thuộc tính styleex):

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

Có vẻ như một lược đồ quá phức tạp với tôi. ¯_ (ツ) _ /

Bây giờ bạn sẽ phải đi và thay đổi tất cả các tệp css / less của mình thành scss và cập nhật bất kỳ tài liệu tham khảo nào trong các thành phần, v.v., nhưng bạn nên đi.

Kể từ ngày 3/10/2019, Anguar đã bỏ sự hỗ trợ của sass. Không có tùy chọn nào bạn đã chuyển qua --stylekhi chạy ng new, bạn luôn nhận được .scsscác tệp được tạo. Thật xấu hổ khi hỗ trợ sass bị bỏ mà không có lời giải thích.

Đặt nó làm mặc định toàn cầu

ng set defaults.styleExt=scss --global

Tích hợp tiền xử lý CSS Angular CLI hỗ trợ tất cả các bộ tiền xử lý CSS chính:

Để sử dụng các bộ tiền xử lý này, chỉ cần thêm tệp vào styleUrls của thành phần:

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

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

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

Các chuỗi kiểu được thêm vào mảng @ Element.styles phải được viết bằng CSS vì CLI không thể áp dụng bộ xử lý trước cho các kiểu nội tuyến.

Dựa trên tài liệu góc https://github.com/angular/angular-cli/wiki/stories-css-pre Processors

Tôi đã cố gắng cập nhật dự án của mình để sử dụng sass bằng lệnh này

ng đặt mặc định.styleExt scss

nhưng có cái này

get / set đã không được dùng trong lệnh config.

• CLI góc: 6.0.7
• Nút: 8,9.0
• HĐH: linux x64
• Góc: 6.0.3

Vì vậy, tôi đã xóa dự án của mình (vì tôi mới bắt đầu và không có mã trong dự án của mình) và tạo một dự án mới với sass được thiết lập ban đầu

ng my-sassy-app --style = scss

Nhưng tôi sẽ đánh giá cao nếu ai đó có thể chia sẻ một cách để cập nhật dự án hiện tại vì điều đó sẽ tốt.

Bước 1. Cài đặt gói bulma bằng npm

npm install --save bulma

Bước 2. Mở angular.json và cập nhật mã sau

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

Đó là nó.

Để dễ dàng hiển thị các công cụ của Bulma, hãy thêm stylePre ProcessorOptions vào angular.json.

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

BULMA + ANGULAR 6