Làm cách nào để đưa tệp SCSS vào Angular?

góc cạnh

Angular Sass (Syntactally Awesome Style Sheets) là một tiện ích mở rộng của CSS cho phép bạn sử dụng các biến, quy tắc lồng nhau, nhập nội tuyến, v.v. Nó cũng hỗ trợ bạn sắp xếp mọi thứ ngăn nắp và cho phép bạn tạo biểu định kiểu nhanh hơn

Sass là bộ tiền xử lý CSS kết hợp các tính năng độc đáo như biến, quy tắc lồng nhau và mixin (đôi khi được gọi là đường cú pháp) vào CSS thông thường. Mục tiêu chính của Sass là làm cho quá trình mã hóa CSS trở nên thoải mái và hiệu quả hơn

Sass tương thích với mọi phiên bản CSS. Các biểu định kiểu mặc định có. tiện ích mở rộng css khi làm việc với Angular CLI. Chúng tôi đang sử dụng Angular CLI 8. Vì vậy, nếu bạn chưa sử dụng nó trước đây, vui lòng nâng cấp phiên bản CLI của bạn. Chúng tôi sẽ sử dụng Bootstrap 4 Framework cho bản demo này và xem cách định cấu hình Sass trong ứng dụng Angular của chúng tôi.

Trước tiên, hãy kiểm tra phiên bản CLI góc của bạn bằng lệnh này

ng --version

Nếu nó không phải là mới nhất, hãy nâng cấp lên phiên bản mới nhất và quay lại đây.  

Bước 1. Tạo một dự án góc mới

Nhập nội dung sau để tạo dự án Angular mới

ng new angularsass

Bạn sẽ thấy một số lời nhắc như thế này khi tạo một dự án mới

Chúng tôi có thể thấy rằng chúng tôi đã hỏi liệu chúng tôi có muốn sử dụng các kiểu Sass cho dự án của mình không. Tôi đã chọn Định tuyến góc thành Không và chọn Sass cho các kiểu

Bây giờ phong cách của dự án của chúng tôi được thay đổi thành Sass. Bạn có thể xem các tệp bên trong thư mục src mà chúng tôi có các kiểu. scss và bên trong thư mục ứng dụng, chúng tôi có ứng dụng. thành phần. tập tin scss

Tiếp theo, chúng ta cần đưa Bootstrap 4 vào dự án của mình

Bước 2. Cài đặt thư viện bootstrap-sass

Cài đặt thư viện bootstrap-sass, đây là phiên bản SASS của Bootstrap

npm install bootstrap --save

Bước tiếp theo là nhập tệp đó vào trong src >> style. tệp scss. Vì vậy, hãy để chúng tôi làm điều đó

/* You can add global styles to this file, and also import other style files */

@import "../node_modules/bootstrap/scss/bootstrap.scss";

Vì vậy, ở đây chúng tôi đã bao gồm Bootstrap. scss cho dự án của chúng ta, hãy lưu tệp và khởi động máy chủ phát triển góc cạnh

ng serve

Bạn có thể thấy rằng chúng tôi đã tích hợp thành công thư viện Bootstrap sass vào dự án của mình. Bây giờ, chúng ta có thể thêm nhiều tệp scss vào nó, biên dịch chúng thành CSS và sử dụng chúng trong dự án của chúng ta

Bước 3. Thêm kiểu scss mới

Đầu tiên, chúng ta hãy tạo một thanh điều hướng bên trong dự án của chúng ta

Vì vậy, hãy viết đoạn mã sau bên trong ứng dụng. thành phần. tệp html

Chúng tôi đã sử dụng Thanh điều hướng Bootstrap đơn giản. Nhưng bây giờ chúng ta cần thay đổi một số kiểu của thanh điều hướng

Vì vậy, chúng tôi sẽ viết mã scss để thay đổi các kiểu đó. Lưu tệp và xem thanh điều hướng trên trình duyệt

Hãy để chúng tôi tạo các lớp mới bên trong ứng dụng. thành phần. tệp scss. Chúng tôi sẽ thêm các lớp giả vào thành phần thanh điều hướng

// app.component.scss

$backColor: brown;

.search-button {
    border-color: skyblue;
    color: blue;

    &:hover, &:after, &:focus {
        background-color: transparent;
        color: $backColor;
    }
}
.brand-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor;
    }
}

.login-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
}

.register-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
}

Ở đây, chúng tôi đã xác định biến màu. Bạn có thể tạo một tệp riêng như _variables. scss, nhưng hiện tại, hãy sử dụng mã này

Nếu một số màu bị lặp lại, chúng ta có thể xác định biến rồi xác định như trên và sử dụng biến đó bất cứ khi nào cần

Bây giờ, hãy thêm các lớp mới bên trong ứng dụng. thành phần. tệp html

Lưu tệp và bây giờ di chuột vào nút, liên kết bên trong trình duyệt. Bạn có thể thấy rằng màu nâu được áp dụng cho phong cách của chúng tôi. Vì vậy, đó là cách bạn có thể đưa SCSS vào dự án của chúng tôi

Sử dụng Sass trong Angular 13 hoặc Angular 14

Nếu bạn có Angular CLI dưới phiên bản 7, bạn phải tạo một dự án Angular mới như thế này

Bây giờ, thêm Bootstrap 4

npm install bootstrap --save

// or using yarn

yarn add bootstrap

Sau khi cài đặt xong, chúng ta cần thêm tệp chính Bootstrap Sass (i. e. , trong đó tất cả các kiểu như biến, mixins, biểu mẫu, nút, bảng, v.v. , được nhập) vào các kiểu. scss, được tạo tự động khi bạn tạo dự án

ng new angularsass

Vì vậy, đây là cách bạn sẽ tích hợp Sass trong Angular 5, Angular 6, Angular 7, Angular 8 hoặc Angular 9. Không có nhiều sự khác biệt trong đó

Làm cách nào để nhập tệp SCSS trong góc?

Bạn có thể sử dụng SCSS với góc cạnh không?

Làm cách nào để thêm scss vào góc 13?

Làm cách nào để sử dụng các biến SCSS trong góc?