Tôi có thể đổi tên tệp CSS thành SCSS không?

Tạo ứng dụng Angular thông qua Angular CLI cho phép bạn chọn định dạng biểu định kiểu giữa CSS (mặc định), SCSS, SASS, LESS và Stylus

SASS là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành Cascading Style Sheets (CSS) có hai cú pháp: cú pháp mới hơn “SCSS” và cú pháp truyền thống “SASS”

Sử dụng ngôn ngữ tiền xử lý như SCSS cho phép người dùng áp dụng các chiến thuật phức tạp và linh hoạt như biến, lồng, trộn, kế thừa. Với sự kỳ diệu của SCSS, bạn có thể dễ dàng thiết lập hệ thống phân cấp kiểu dáng của ứng dụng Angular với các biến toàn cục, mixin và mô-đun và sử dụng chúng trong bất kỳ biểu định kiểu nào với @import

Ví dụ về biến SCSS

Trong bài đăng này, tôi sẽ cung cấp cho bạn hướng dẫn từng bước để nâng cấp Angular của bạn từ định dạng kiểu CSS mặc định lên SCSS. Thứ tự của hướng dẫn này được hiển thị dưới đây

Khái niệm cơ bản

1. Tạo một Angular mới với biểu định kiểu CSS mặc định

2. Cập nhật lược đồ cấu hình góc

3. Đổi tên tất cả. tập tin css để. scss & StyleUrl của Thành phần

Nâng cao

1. Thiết lập hệ thống phân cấp biểu định kiểu SCSS

2. Sử dụng Bootstrap SCSS

Bạn có thể tải xuống mã từ repo Github của tôi. góc-scss

1. Tạo một ứng dụng Angular mới thông qua Angular CLI

Chạy các lệnh Tạo một dự án góc mới với một thành phần

ng new angular-scss
cd angular-scss
ng g component scss-sample

Cập nhật ứng dụng. thành phần. html

Phục vụ ứng dụng Angular bằng lệnh ng serve và mở localhost. 4200

Ứng dụng góc hoàn toàn mới

2. Cập nhật lược đồ cấu hình góc

Chạy lệnh bên dưới dưới đường dẫn ứng dụng góc gốc của bạn

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

Sau lệnh này, bạn sẽ thấy những thay đổi bên dưới trong góc của bạn. tập tin json

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

3. Đổi tên. tập tin css để. scss & Các thành phần' styleUrl

3. 1 Xóa thư mục /node_modules/

Chạy rm -r -f node_modules để xóa thư mục node_modules và tất cả các tệp trong đó. Điều này sẽ ngăn chặn mọi khả năng đổi tên thành. css trong node_modules của bạn

3. 1 Tạo đổi tên. sh trong đường dẫn gốc của ứng dụng Angular của bạn

Chạy đổi tên vim. sh và sao chép mã đổi tên bên dưới

#!/bin/bash
for file in $(find . -name "*$1");
do
  mv "$file" "${file%$1}$2"
done

Nhập esc và. wq để viết và lưu tệp này

Chạy. /đổi tên. sh. css. scss dưới đường dẫn gốc của ứng dụng để đổi tên tất cả. tập tin css để. tập tin scss

3. 3. StyleUrl của các thành phần cập nhật

Thay thế styleUrl của các thành phần từ _. thành phần. css sang _. thành phần. scss

Trong Visual Studio Code, bạn có thể sử dụng Ctrl+Shift+H trong Windows hoặc Cmd+Shift+F trong MacOS để thay thế toàn cầu. thành phần. css đến. thành phần. scss

3. 4 Cập nhật mảng kiểu trong góc. tập tin json

Mở bạn góc cạnh. json và thay đổi điểm nhập bảng định kiểu của bạn

Thay đổi mảng kiểu trong góc. json từ

"styles": [
   "src/styles.css"
]

đến

"styles": [
   "src/styles.scss"
]

3. 5 Xóa đổi tên. sh và cài đặt lại gói npm

Chạy rm đổi tên. sh để xóa đổi tên. tập tin sh

Chạy npm install để cài đặt lại tất cả các gói npm

Chạy ng serve và mở localhost. 4200

Bạn có thể kiểm tra xem SCSS có hoạt động hay không bằng cách sao chép mã kiểu dáng SCSS này vào tệp kiểu dáng thành phần của bạn, scss-sample. thành phần. scss

$font-color: #fff;
$background-color:#000;

p {
   color: $font-color;
   background-color: $background-color;
}

Nếu bạn có thể thấy ứng dụng của mình như thế này bên dưới, điều đó có nghĩa là ứng dụng Angular của bạn đã được nâng cấp thành công

Ứng dụng góc hoàn toàn mới với biểu định kiểu SCSS

4. Thiết lập hệ thống phân cấp biểu định kiểu SCSS

Trong chế độ sản xuất, chúng tôi sẽ cần thiết lập một hệ thống phân cấp biểu định kiểu rõ ràng để quản lý tốt hơn các kiểu của ứng dụng. Cách thiết lập hệ thống phân cấp biểu định kiểu của riêng bạn tùy thuộc vào sở thích của riêng bạn. Đối với tôi, tôi muốn tạo thư mục/styles/ trong/src và tạo _variables. scss,_mixin. scss và chỉ mục. tập tin scss trong đó

Hệ thống phân cấp kiểu SCSS

Trong trường hợp này, bạn có thể dễ dàng quản lý các biến toàn cục và mixin bên trong hai tệp này và nhập hai tệp này vào chỉ mục. tập tin scss. Để sử dụng các biến và mixin đã khai báo, chỉ cần @import '. /. /kiểu/chỉ mục. scss';trong tệp scss của thành phần của bạn

_Biến đổi. scss

________số 8

_mixins. scss

@mixin hover-effect {
   &:hover, &:focus {
      border: 1px solid red;
   }
}

mục lục. scss

0

scss-mẫu. thành phần. scss

1

Bạn sẽ thấy các hiệu ứng như hình bên dưới

Tạo kiểu với các biến SCSS và mixin

5. Sử dụng các biến Bootstrap SCSS

Để sử dụng Bootstrap scss trong ứng dụng Angular của bạn, bạn có thể nhập thành phần scss của bootstrap bằng cú pháp '@import' hoặc bạn có thể nhập toàn bộ biểu định kiểu bootstrap trong kiểu của mình. tập tin scss

Ví dụ: nếu bạn muốn sử dụng toàn bộ biểu định kiểu bootstrap

Đầu tiên cài đặt bootstrap bằng cách chạy npm install bootstrap

Sau đó, nhập bootstrap theo kiểu. scss bằng cách thêm dòng này vào bên dưới

@nhập khẩu '. /node_modules/bootstrap/scss/bootstrap. scss’;

Giờ đây, bootstrap đã được thêm vào ứng dụng Angular của bạn và bạn có thể sử dụng một số lớp tích hợp bootstrap như float-left, float-right, text-left, text-right, v.v.

e. g. scss-mẫu. thành phần. html

2

Chế độ xem trình duyệt

Tạo kiểu với Bootstrap SCSS

kết thúc

Việc thêm ngôn ngữ biểu định kiểu tiền xử lý giúp linh hoạt hơn để làm cho ứng dụng của bạn trở nên sống động và giúp quản lý các biến biểu định kiểu của bạn theo cách dễ dàng hơn. Hãy thử xem sao?

Tôi có thể thay đổi CSS thành SCSS không?

Làm cách nào để thay đổi tệp CSS thành SCSS trong Angular?