Phong cách scss không hoạt động góc cạnh

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-migrateLiê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

  <>Copy
  ng g schematics-scss-migrate:scss-migrate

  0 thành

  <>Copy
  ng g schematics-scss-migrate:scss-migrate

  0 trong tệp angular.json

Phương pháp di chuyển thủ công bằng cách sử dụng ng CLILiê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ênLiê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

Tôi có thể sử dụng SCSS trong Angular không?

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

Làm cách nào để sử dụng các biến SCSS trong thành phần Góc?

Tôi có thể sử dụng biến bản thảo trong SCSS không?