Tùy chọn Angular CLI SASS

337
JDillon522 2016-03-26 02:48.

Tôi mới sử dụng Angular và tôi đến từ cộng đồng Ember. Đang 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 liệu nó có hoạt động hay không vì một số thành phần cốt lõi của Angular-CLI đã chạy khỏi mô-đun Ember-CLI.

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

Ngoài ra, cách tốt nhất để tổ chức các style 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.

15 answers

552
Mertcan Diken 2016-10-03 01:08.

Angular CLI phiên bản 9 (được sử dụng để tạo các dự án Angular 9) bây giờ chọn styletừ các sơ đồ thay vì styleext. Sử dụng lệnh như sau:
ng config [email protected]/angular:component.style scss
góc.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ợ của sass, hãy thử cách 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 và dễ dàng này và nếu bạn vẫn chưa biết, hãy scsstiếp tục và tiếp tục học.

Nếu bạn có một dự án góc 5, hãy 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

Đối với các phiên bản mới nhất

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

ng config [email protected]/angular:component.styleext scss

Hoặc Trực tiếp vào angle.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}
347
All Іѕ Vаиітy 2017-01-09 18:28.

Cập nhật cho Angular 6+

  1. Dự án mới

    Khi tạo một dự án mới với Angular CLI, hãy 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 trên một dự án hiện có bằng cách chạy

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

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

    nơi styleextcó thể là một trong hai 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 hương vị mong muốn SASS / SCSS

  • 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ó

Để angular-clibiên dịch các tệp sass với node-sass, tôi phải chạy,

npm install node-sass --save-dev 

cài đặt nào 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",
    }
    


Mặc dù nó đã tạo ra lỗi trình biên dịch.

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"
      ],

cho một trong hai,

  • cho cú pháp SASS

    "styles": [
            "styles.sass"
          ],
    
  • cho cú pháp SCSS

    "styles": [
            "styles.scss"
          ],
    
38
regnar 2016-05-12 12:12.

Trích dẫn từ repo github của Official tại đây -

Để sử dụng một ví dụ, chỉ cần cài đặt

npm install node-sass

và đổi tên 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à compaCompiler được chuyể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

26
Michael P. Bazos 2017-03-03 01:19.

Yêu cầu angle-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 một dự án, bạn có thể muốn điều chỉnh cấu hình mặc định của mình về angle-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 angle-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 bằng:

ng new some_project_name --style=scss
21
Jared Wadsworth 2016-11-18 06:22.

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

15
JoelParke 2016-12-18 13:51.

Tôi nhận thấy một lỗi rất đáng mừng khi chuyển sang tệp scss !!! Người ta PHẢI chuyển từ đơn giản: styleUrls: ['app.component.scss']sang styleUrls: ['./app.component.scss'](thêm ./) vàoapp.component.ts

Điều mà ng thực hiện 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 lỗi đã giải quyết được trong quá trình xây dựng, hãy kiểm tra vấn đề này. Tôi chỉ mất ~ 1 giờ.

5
Alireza 2017-06-09 23:03.

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!

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 package.json hiện có của bạn: npm install node-sass sass-loader raw-loader --save-dev

Trong webpack.common.jstìm kiếm "rules:" 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), hãy xóa tính năng đó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 tại đây .

5

ng set --global defaults.styleExt=scsskhông được dùng nữa kể từ ng6. Bạn sẽ nhận được thông báo này:

get / set đã không được dùng nữa vì có lợi cho lệnh config

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

ng config [email protected]/angular:component '{ styleext: "scss"}'

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

ng config projects.{project}[email protected]/angular:component '{ styleext: "scss"}'
3
Edodso2 2018-05-09 13:02.

Angular-CLI là phương pháp được khuyến nghị và là tiêu chuẩn trong cộng đồng Angular 2+.

Crete 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 cách tiếp cận 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 đến chúng.
  2. thêm phần sau vào khóa "sơ đồ" của angle.json (thường là dòng 11):

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

3
Mahozad 2020-03-19 11:07.

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

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
2
Neil Watson 2018-06-02 04:45.

Phần sau sẽ hoạt động 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òn được dùng nữa để thay thế cho lệnh config.

npm install node-sass --save-dev

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

ng config [email protected]/angular:component.styleext sass

Để sử dụng tên dự án mặc định của bạn:

ng config defaultProject

Tuy nhiên: Nếu bạn đã di chuyển dự án của mình từ <6 lên đế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" lúc 0: 0

Do đó, chỉnh sửa thủ công của 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 đối 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 bạn thành scss và cập nhật bất kỳ tham chiếu nào trong các thành phần, v.v., nhưng bạn nên thực hiện.

2
Just a learner 2019-03-10 14:27.

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

1
Sajith Mantharath 2018-02-13 01:00.

Đặt nó làm Mặc định chung

ng set defaults.styleExt=scss --global

0
Victor Hugo Arango A. 2018-06-05 05:54.

Tích hợp bộ 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 styleUrl của thành phần của bạn:

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

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

ng new sassy-project --style=sass

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

ng config [email protected]/angular:component.styleext scss

lưu ý: @ scheagram / angle là giản đồ mặc định cho Angular CLI

Các chuỗi kiểu được thêm vào mảng @ Component.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-preprocessors

0
Junaid 2018-06-02 00:19.

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 set defaults.styleExt scss

nhưng có cái này

get / set đã không còn được dùng nữa để thay thế cho lệnh config.

  • Angular CLI: 6.0.7
  • Nút: 8.9.0
  • Hệ điều hành: linux x64
  • Góc cạnh: 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ã nào trong dự án của mình) và tạo một dự án mới với sass được đặt ban đầu

ng new 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 có như vậy sẽ tốt.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language