Hướng dẫn nhanh về cách sử dụng SCSS trong ứng dụng Angular được dàn dựng để sử dụng định dạng biểu định kiểu mặc định
góc cạnh
scss
sơ đồ
15 tháng 10 năm 2020 4 phút đọc
Di chuyển từ. CSS để. Bảng định kiểu SCSS cho một dự án Angular hiện có
Hướng dẫn nhanh về cách sử dụng SCSS trong ứng dụng Angular được dàn dựng để sử dụng định dạng biểu định kiểu mặc định
Thabo Ambrose
Thabo Ambrose
góc cạnh
scss
sơ đồ
15 tháng 10 năm 2020 4 phút đọc
Bạn có thể đã quên cung cấp cờ style=scss hoặc có thể bạn không biết rằng nó đã tồn tại khi bạn tạo một ứng dụng Angular mới bằng cách sử dụng Angular CLI và bây giờ bạn muốn chuyển sang sử dụng định dạng biểu định kiểu SCSS trong dự án của mình,
Trong bài viết này, tôi sẽ trình bày
- Sử dụng gói NPM sơ đồ góc để thực hiện di chuyển chỉ bằng một lệnh
- Cách thủ công để thực hiện di chuyển i. e. sử dụng lệnh ng cli
- Sử dụng công cụ đổi tên gói NPM để thực hiện di chuyển
Tôi sẽ không đề cập đến SCSS và Sơ đồ góc trong bài viết này vì tôi cho rằng bạn biết chúng là gì. Bạn có thể đọc một loạt bài viết về Lược đồ góc tuyệt vời tại đây trên
Thông thường, để tạo một dự án Angular mới sử dụng bảng định kiểu SCSS bằng Angular CLI, bạn phải chạy lệnh sau
Copy
ng new my-scss-app --style=scss
Một cách nhanh chóng và dễ dàng để thực hiện việc di chuyển là sử dụng gói sơ đồ NPM schematics-scss-migrate. Đọc thêm về chức năng của gói sơ đồ này trên NPM
Sử dụng gói NPM schematics-scss-migrate
Liên kết đến phần này
Để di chuyển dự án của bạn bằng gói này, tất cả những gì bạn phải làm là cài đặt gói, lý tưởng nhất là phụ thuộc vào nhà phát triển và chạy lệnh bên dưới trong thư mục không gian làm việc dự án của bạn
GHI CHÚ. Bạn có thể sử dụng --dry-run=true để kiểm tra trước khi thực hiện di chuyển thực tế
Copy
ng g schematics-scss-migrate:scss-migrate
Và thế là xong, lệnh trên đã làm như sau
- Đã đổi tên tất cả các bảng định kiểu trong thư mục
src
theo cách đệ quy - Đã thay đổi giá trị
styleUrls
để trỏ đến tên tệp mới cho biểu định kiểu trong các lớp thành phần liên quan đến tệp kiểu thành phần - Đã cập nhật giá trị sơ đồ kiểu thành phần trong tệp
angular.json
hoặc tạo một giá trị nếu sơ đồ không tồn tại - Và đổi tên tham chiếu
0 thànhCopy
ng g schematics-scss-migrate:scss-migrate
0 trong tệpCopy
ng g schematics-scss-migrate:scss-migrate
angular.json
Phương pháp di chuyển thủ công bằng cách sử dụng ng CLI
Liên kết đến phần này
GHI CHÚ. Đối với các phiên bản Angular CLI cũ hơn v6 beta, hãy sử dụng ng set thay cho ng config
Với một thay đổi đi kèm với Angular 9, styleext đã được đổi tên thành style, nếu bạn đang sử dụng phiên bản 9 trở lên, thì lệnh của bạn sẽ là
Copy
ng config schematics.@schematics/angular:component.style scss
Hoặc bạn có thể trực tiếp đặt sơ đồ trong góc. tệp cấu hình json như bên dưới
Copy
"schematics": { "@schematics/angular:component": { "style": "scss" } ... }
Sau đó, trong góc. json, hãy thay đổi phần mở rộng tệp của kiểu. css cho các tùy chọn xây dựng và thử nghiệm dự án của bạn để tạo kiểu. scss, tham khảo bên dưới
Copy
{ "projects": { "your-project-name": { ... "architect": { "build": { "options": { "styles": [ "src/styles.css" // update ... ] ... } ... }, "test": { ... "options": { ... "styles": [ "src/styles.css" // update ], } }, } } } }
Và sau đó để đổi tên các tệp biểu định kiểu, hãy làm theo hướng dẫn bên dưới
Thay đổi tệp biểu định kiểu của dự án từ. css đến. phần mở rộng tệp scss bằng cách sử dụng gói NPM đổi tên
Liên kết đến phần này
Để đạt được điều này một cách hiệu quả nhất, tôi đã sử dụng gói NPM. đổi tên
Tôi đã cài đặt gói trên toàn cầu [Bạn có thể sử dụng npx nếu muốn]
Copy
npm i -g renamer
Bây giờ, trong terminal, điều hướng đến thư mục src của dự án
Trước khi bạn tiếp tục chạy các lệnh trên dự án của mình, hãy bắt đầu - cam kết công việc của bạn và có thể chuyển sang một nhánh mới để thử với công cụ đổi tên, bạn có thể đọc thêm về nó tại đây
Hãy kiểm tra công cụ, LƯU Ý. Sử dụng cờ -d cho DRY-RUN của lệnh
Lệnh trên đổi tên tất cả các tệp bằng. CSS để. SCSS trong thư mục làm việc hiện tại là src vì chúng ta đã điều hướng đến nó, điều này là do ký tự đại diện/toàn cầu ở cuối lệnh là “*”, bây giờ chúng ta thấy lệnh đó làm những gì nó nên làm, hãy đi
Những thay đổi nơi thành công
Trước lệnh
Sau lệnh
Lưu ý rằng chúng tôi đã chạy lệnh hai lần trên các kiểu. scss do thử nghiệm của chúng tôi lúc đầu, bây giờ là phong cách. sscss, chính xác đến mức
Bây giờ chúng tôi đã đạt được điều đó, chúng tôi phải thay đổi nguồn để sử dụng phần mở rộng tệp mới, vì một quy ước tốt của Angular gợi ý rằng chúng tôi đặt tên cho các biểu định kiểu của các thành phần của mình bằng cách thêm chúng vào hậu tố. thành phần. css làm các tệp thành phần của chúng tôi, việc tái cấu trúc toàn bộ dự án trở nên dễ dàng trong một lần, ít nhất đối với tôi, tôi đã tìm kiếm trên toàn cầu bất kỳ tệp nào có phần mở rộng. thành phần. css bằng phím tắt Ctrl + Shift + f và thay thế tất cả bằng Ctrl + Shift + h
Dự án của tôi có nhiều tài liệu tham khảo nên các phím tắt và tuân theo các quy ước Góc đã giúp tôi tiết kiệm thời gian
Bản dựng của dự án có màu xanh lá cây, vì vậy vâng, đó là cách bạn có thể nhanh chóng di chuyển từ. css đến. scss stylesheets cho một ứng dụng Angular hiện có
Bạn chọn phương pháp nào là tùy thuộc vào bạn, nhưng đối với tôi, gói schematic-scss-migrate dường như là cách tiếp cận dễ dàng nhất và cũng xem xét rằng nó an toàn để sử dụng vì bạn có thể sử dụng tùy chọn chạy khô để có thể xác minh