Hướng dẫn angular add scss to existing project - góc cạnh thêm scss vào dự án hiện có

Trong một dự án Angular-Cli hiện có được thiết lập với các kiểu CSS mặc định, bạn sẽ cần phải làm một vài điều:

1. Thay đổi phần mở rộng kiểu mặc định thành SCSS thay đổi thủ công trong .angular-cli.json (Angular 5.x trở lên) hoặc Angular.json (Angular 6+) hoặc Run:

Ng config default.StyleExt = SCSS

Nếu bạn gặp lỗi: Không thể tìm thấy giá trị. Sử dụng lệnh:

Ng Sơ đồ cấu hình.@Sơ đồ/Angular: Thành phần.StyleExt SCSS

(*Nguồn: Các tùy chọn Angular Cli Sass)

1. Đổi tên các tệp .css hiện tại của bạn thành .scss (tức là style.css và app/app.component.css)

2. Chỉ CLI để tìm style.scss

Thay đổi thủ công các phần mở rộng tệp trong các ứng dụng [0] .Style trong angular.json

4. Điểm các thành phần để tìm các tệp kiểu mới của bạn thay đổi kiểu mẫu trong các thành phần của bạn để phù hợp với tên tệp mới của bạn

Hướng dẫn nhanh để sử dụng SCSS trong một ứng dụng góc được giàn giáo sử dụng định dạng bảng kiểu mặc định.

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 góc mới bằng cách sử dụng CLI Angular và bây giờ bạn muốn chuyển sang sử dụng định dạng bảng kiểu SCSS trong dự án của bạn, và Sự chuyển đổi này có thể gây khó khăn trong trường hợp dự án đã trở nên lớn.style=scss flag or maybe you didn’t know that it existed when you were generating a new Angular application using the Angular CLI, and now you want to switch to using the SCSS stylesheet format in your project, this transition can be daunting in cases where the project has already gotten big.

Trong bài viết này, tôi sẽ đề cập:

• Sử dụng gói NPM sơ đồ góc để thực hiện di chuyển chỉ với một lệnh.
• Cách thủ công để thực hiện di chuyển, tức là bằng cách sử dụng lệnh NG CLI.
• Sử dụng gói npm renamer để thực hiện di chuyển

Tôi sẽ không bao gồm SCSS và sơ đồ góc là gì trong bài viết này bởi vì tôi cho rằng bạn biết những điều này là gì. Bạn có thể đọc về một loạt các bài báo sơ đồ góc cạnh tuyệt vời

Thông thường, để tạo một dự án góc mới sử dụng các kiểu SCSS bằng cách sử dụng CLI góc, bạn phải chạy lệnh sau.

ng new my-scss-app --style=scss

Một cách nhanh chóng và dễ dàng để thực hiện di chuyển là sử dụng gói NPM sơ đồ Sơ đồ-SCSS Migrate. Đọc thêm về những gì gói sơ đồ này làm trên NPM.

Sử dụng gói NPM Sơ đồ-SCSS di cư.

Để 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 là sự phụ thuộc của dev và chạy lệnh bên dưới dưới Dir Workspace của bạn.

Lưu ý: Bạn có thể sử dụng-chạy khô = đúng để thử nghiệm trước khi thực hiện di chuyển thực tế.— dry-run=true for testing before doing the actual migration.

ng g schematics-scss-migrate:scss-migrate

Và đó là nó, lệnh trên đã làm như sau.

• Đổi tên tất cả các bảng kiểu trong thư mục src đệ quy.
• Đã thay đổi giá trị styleUrls để trỏ đến tên tệp mới cho bảng kiểu trong các lớp thành phần liên quan đến các 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 nếu sơ đồ không tồn tại.
• Và đổi tên thành styles.css tham chiếu đến

  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 CLI

Lưu ý: Đối với các phiên bản CLI góc cũ hơn V6 Beta, hãy sử dụng NG được đặt thay cho cấu hình ng.

Với một sự thay đổi đi kèm với Angular 9, StyleExt đã được đổi tên thành phong cách, nếu bạn đang ở phiên bản 9 trở lên, thì lệnh của bạn sẽ làstyleext was renamed to style, if you are on version 9 or later, then your command should be

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

Hoặc bạn có thể đặt trực tiếp các sơ đồ trong tệp angular.jsonconfig như bên dưới:angular.jsonconfig file like the below:

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
 ...
  }

Sau đó, trong tệp Angular.json, thay đổi phần mở rộng tệp của style.css cho các tùy chọn xây dựng và kiểm tra dự án của bạn thành style.scss, hãy tham khảo bên dưới.angular.json file, change the file extension of the style.cssfor your project build and test options to style.scss, refer to the below.

{
 "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 các hướng dẫn bên dưới.

Thay đổi các tệp bảng kiểu dự án từ các phần mở rộng tệp .CSS thành .SCSS bằng gói NPM Renamer.

Để đạt được điều này theo cách hiệu quả nhất, tôi đã sử dụng gói NPM: Renamer.

Tôi đã cài đặt gói trên toàn cầu (bạn có thể sử dụng NPX nếu bạn muốn)

npm i -g renamer

Bây giờ, trong thiết bị đầu cuối, điều hướng đến thư mục SRC của dự án.

Trước khi bạn tiếp tục với các lệnh chạy trong dự án của mình, giai đoạn - cam kết công việc của bạn và có thể chuyển sang một chi nhánh mới để chơi xung quanh với công cụ Renamer, bạn có thể đọc thêm về nó ở đây.

Hãy để kiểm tra công cụ, lưu ý: Sử dụng cờ -D để chạy khô của lệnh-d flag for a DRY-RUN of the command

Lệnh trên đổi tên tất cả các tệp có. Chúng tôi thấy rằng lệnh thực hiện những gì nó nên, hãy tiếp tục và xóa cờ -D khỏi lệnh để áp dụng thực thi.CSS to .SCSS in the current working directory which is src since we had navigated to it, this is because of the wildcard/glob at the far end of the command which is “*”, now that we see that the command does what it should, go ahead and remove the -d flag from the command to apply the execution.

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 styles.scss vì thử nghiệm của chúng tôi ngay từ đầu, bây giờ nó là style.scss, rất chính xá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 tiện ích mở rộng các tệp mới, như một quy ước góc tốt cho thấy rằng chúng tôi đặt tên cho các kiểu dáng của các thành phần của chúng tôi bằng cách hậu tố chúng bằng .conponent.css là các tệp thành phần của chúng tôi, nó trở nên dễ dàng Để tái cấu trúc toàn bộ dự án cùng một lần, đối với tôi ít nhất, tôi đã tìm kiếm trên toàn cầu cho bất kỳ tệp nào có tham chiếu .Component.css bằng cách sử dụng phím tắt CTRL + Shift + F và thay thế tất cả bằng Ctrl + Shift + H.component.css as our component files, it becomes easy to refactor the project as a whole at one go, for me it was at least, I had searched globally for any file with the .component.css reference using the shortcut Ctrl + Shift + f and replace all with Ctrl + Shift + h.

Dự án của tôi có nhiều tài liệu tham khảo vì vậy các phím tắt và theo các quy ước Angular đã cứu tôi một thời gian.

Bản dựng dự án có màu xanh lá cây, vì vậy, đó là cách bạn có thể nhanh chóng di chuyển từ các kiểu dáng của .CSS sang .SCSS cho một ứng dụng góc hiện có..css to .scss stylesheets for an existing Angular application.

Tùy thuộc vào bạn bạn chọn phương pháp nào, nhưng đối với tôi, gói di chuyển sơ đồ-SCSS dường như là cách tiếp cận dễ nhất và cũng xem xét rằng nó an toàn khi sử dụng vì bạn có thể sử dụng tùy chọn chạy khô để bạn có thể xác minh di cư.

Tôi hy vọng bạn thích đọc nó.

Xem nguồn gốc của Sơ đồ-SCSS di cư bên dưới:schematics-scss-migrate below:

Tôi có thể sử dụng SCSS trong dự án góc CSS không?

Các SCSS biên dịch Angular có?

Sass có giống như SCSS không?

SCSS và CSS có giống nhau không?