Hướng dẫn scss to css intellij - scss đến css intellij
Intellij & nbsp; Idea tích hợp với các trình biên dịch dịch mã SASS, Ít hơn và SCSS thành CSS. Để sử dụng trình biên dịch trong IntelliJ & NBSP; IDEA, bạn cần định cấu hình nó như một trình theo dõi tệp dựa trên mẫu được xác định trước có liên quan. Hãy chắc chắn rằng bạn có Node.js trên máy tính của bạn. Cài đặt và bật plugin Trình theo dõi tệp trên Cài đặt/Tùy chọn | Trang Plugins, Tab Marketplace, như được mô tả trong việc cài đặt các plugin từ kho lưu trữ JetBrains.File Watchers plugin on the
Settings/Preferences | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains repository. Đảm bảo plugin ít hoặc yêu cầu SASS được bật trên cài đặt/tùy chọn | Trang plugins, tab được cài đặt, xem quản lý plugin để biết chi tiết.Less or Sass required plugin is enabled on the
Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details. Trong thiết bị đầu cuối nhúng (ALT+F12), loại:Terminal
(Alt+F12) , type: Tìm hiểu thêm từ trang web chính thức của SASS. Trong thiết bị đầu cuối nhúng (ALT+F12), loại:Terminal
(Alt+F12) , type: Tìm hiểu thêm từ trang web chính thức của SASS. Tìm hiểu thêm từ trang web ít chính thức hơn. Biên dịch mã của bạn thành CSS Để tự động biên dịch mã của bạn, bạn cần định cấu hình trình theo dõi tệp SASS, Ít hơn hoặc SCSS sẽ theo dõi các thay đổi cho các tệp của bạn và chạy trình biên dịch. Khi bạn mở một tệp, IntelliJ & NBSP; IDEA sẽ kiểm tra xem người theo dõi tệp áp dụng có sẵn trong dự án hiện tại hay không. Nếu trình xem tệp như vậy được cấu hình nhưng bị vô hiệu hóa, IntelliJ & NBSP; IDEA sẽ hiển thị một cửa sổ bật lên thông báo cho bạn về trình xem tệp được định cấu hình và đề xuất để kích hoạt nó.Auto-save edited files to trigger the watcher checkbox is
selected, the File Watcher is invoked as soon as any changes are made to the source code. Nếu trình theo dõi tệp áp dụng được cấu hình và bật trong dự án hiện tại, IntelliJ & NBSP; Idea sẽ tự động khởi động trình biên dịch trên sự kiện được chỉ định trong hộp thoại Watcher mới.Auto-save edited files to trigger the watcher checkbox is cleared, the File Watcher is started upon save (,
Ctrl+S) or when you move focus from IntelliJ IDEA (upon frame deactivation). Nếu các tệp được chỉnh sửa tự động tạo để kích hoạt hộp kiểm Watcher được chọn, trình xem tệp sẽ được gọi ngay khi có bất kỳ thay đổi nào được thực hiện đối với mã nguồn. Nếu các tệp đã chỉnh sửa tự động tạo để kích hoạt hộp kiểm Watcher được xóa, trình theo dõi tệp sẽ được khởi động khi lưu (, ctrl+s) hoặc khi bạn di chuyển lấy nét từ intellij & nbsp; ý tưởng (khi hủy kích hoạt khung).Sass, Less, or SCSS file and the extension .css. The location of the generated files is defined in the
Output paths to refresh field of the New Watcher dialog. However, in the Project Tree, they are shown under the source file which is now displayed as a node. Intellij & nbsp; IDEA tạo ra một tệp riêng với đầu ra được tạo. Tệp có tên của tệp SASS, ít hơn hoặc SCSS và phần mở rộng .css. Vị trí của các tệp được tạo được xác định trong các đường dẫn đầu ra để làm mới trường của hộp thoại Watcher mới. Tuy nhiên, trong cây dự án, chúng được hiển thị trong tệp nguồn hiện được hiển thị dưới dạng nút.Settings/Preferences
dialog
(Ctrl+Alt+S), click File Watchers under Tools. The File Watchers page that opens shows the list of already configured File Watchers. Tạo trình xem tệp Trong hộp thoại Cài đặt/Tùy chọn (CTRL+ALT+S), nhấp vào Tệp Watchers trong các công cụ. Trang Watchers File Watchers mở cho thấy danh sách các trình theo dõi tệp đã được cấu hình.Program field, specify the path to the compiler archive depending on the chosen predefined template.
Ít hơn cho ít hơn. and choose the file location in the dialog that opens. Sass cho SASS/SCSS. Nếu bạn làm theo quy trình cài đặt tiêu chuẩn với NPM, IntelliJ & NBSP; IDEA sẽ tự động định vị các tệp cần thiết và tự động điền vào trường. Mặt khác, nhập đường dẫn bằng tay hoặc nhấp và chọn vị trí tệp trong hộp thoại mở ra.Tiến hành như mô tả trong người theo dõi tập tin. Ví dụ: Biên soạn SCSS thành CSS_grid.scss is imported in Page.scss. The example below shows how Page.scss is compiled into CSS when you save your project manually or automatically and how the changes to _grid.scss are reflected in the generated CSS file.
Page.css với mã CSS được biên dịch Page.css.map với các bản đồ nguồn cho phép bạn bước qua ứng dụng của mình trong phiên gỡ lỗi.Mặc dù các cài đặt mặc định là đủ để chạy trình biên dịch thành công, nhưng chúng ta vẫn xem xét kỹ hơn chúng để xem cách hành vi của trình xem tệp có thể được tùy chỉnh. Thay đổi hành động kích hoạt trình theo dõi tệp Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. . Chọn Trình theo dõi tệp cần thiết (SCSS trong ví dụ của chúng tôi) và nhấp vào thanh công cụ. Trong hộp thoại Chỉnh sửa tệp Watcher, mở rộng khu vực Tùy chọn nâng cao và xóa các tệp chỉnh sửa tự động để kích hoạt hộp kiểm Watcher.SCSS in our example) and click on the toolbar. In the Edit File Watcher dialog, expand the Advanced Options area and clear the Auto-save edited files to trigger the watcher checkbox. Theo mặc định, người theo dõi tệp thức dậy ngay cả khi một tệp từ phạm vi của nó được chỉnh sửa từ bên ngoài IntelliJ & NBSP; IDEA. Để ghi đè hành vi này và các tệp chuyển đổi chỉ khi chỉnh sửa nội bộ, hãy xóa trình kích hoạt của trình xem trên hộp kiểm Thay đổi bên ngoài.Trigger the watcher on external changes checkbox. Thay đổi phạm viTheo mặc định, IntelliJ & NBSP; Ý tưởng theo dõi các thay đổi trong tất cả các tệp với phần mở rộng .SCSS trong toàn bộ dự án. Điều này làm việc cho ví dụ của chúng tôi. Tuy nhiên, bạn có thể thay đổi phạm vi để xử lý, ví dụ, chỉ có những thay đổi không được cam kết. Trong một dự án lớn, điều này sẽ tiết kiệm thời gian..scss extension in the entire project. This works for our example. However, you can change the scope to process, for example, only uncommitted changes. In a large project, this will save time. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , chọn Trình theo dõi tệp cần thiết (SCSS trong ví dụ của chúng tôi) và nhấp vào thanh công cụ. Trong hộp thoại Chỉnh sửa tệp theo dõi, chọn phạm vi áp dụng từ danh sách. Tìm hiểu thêm từ phạm vi và màu tập tin.SCSS in our example) and click on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list. Learn more from Scopes and file colors. Vị trí đầu ra tùy chỉnhTheo mặc định, các tệp .css và .csss.map được lưu trữ trong thư mục nơi tệp gốc và được hiển thị dưới dạng trẻ em trong cửa sổ công cụ dự án. Bạn có thể thay đổi hành vi mặc định này để lưu trữ tất cả các tệp .css và .css.map trong một thư mục riêng..css and .css.map files are stored in the folder where the original file is and are shown as its children in the Project tool window. You can change this default behavior to store all generated .css and .css.map files in a separate folder. Hãy bắt đầu với một trường hợp đơn giản. Giả sử bạn có tệp Custom_output.scss trong root dự án.custom_output.scss file in the project root. Ví dụ, hãy chỉnh sửa Custom_output.scss, thay thế Sẽ rất thuận tiện để lưu trữ tất cả các đầu ra trong một thư mục riêng, ví dụ, CSS. Hãy tạo một trình theo dõi tệp SCSS_CUSTOM_OUTPUT tùy chỉnh với thư mục CSS làm vị trí đầu ra.css. Let's create a custom SCSS_custom_output File Watcher with the css folder as the output location. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , sau đó tạo một trình xem tệp SCSS như được mô tả ở trên. Cập nhật cài đặt mặc định như sau:
Lưu trình theo dõi tệp mới và đảm bảo nó được bật. Bây giờ, nếu bạn chỉnh sửa Custom_output.scss, ví dụ, hãy thay thế Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốcBây giờ chúng ta hãy xem xét một ví dụ trong đó các tệp .SCSS được lưu trữ trong cấu trúc thư mục, ví dụ:.scss files are stored in a folder structure, for example: Với trình theo dõi tệp mặc định, các tệp được tạo sẽ được lưu trữ bên cạnh các tệp .SCSS gốc. Nếu chúng tôi sử dụng Trình xem tệp tùy chỉnh như được mô tả ở trên, tất cả các tệp được tạo sẽ được lưu trữ trong cùng một thư mục CSS:.scss files. If we use the custom File Watcher as described above, all the generated files will be stored in one same css folder: Để có IntelliJ & nbsp; IDEA Bảo tồn cấu trúc thư mục, hãy tạo một trình theo dõi tệp tùy chỉnh khác. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , sau đó tạo một trình xem tệp SCSS như được mô tả ở trên. Cập nhật cài đặt mặc định như sau:
Lưu trình theo dõi tệp mới và đảm bảo nó được bật. Bây giờ, nếu bạn chỉnh sửa Custom_output.scss, ví dụ, hãy thay thế Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốcBây giờ chúng ta hãy xem xét một ví dụ trong đó các tệp .SCSS được lưu trữ trong cấu trúc thư mục, ví dụ: Với trình theo dõi tệp mặc định, các tệp được tạo sẽ được lưu trữ bên cạnh các tệp .SCSS gốc. Nếu chúng tôi sử dụng Trình xem tệp tùy chỉnh như được mô tả ở trên, tất cả các tệp được tạo sẽ được lưu trữ trong cùng một thư mục CSS:my-styles.less is compiled into CSS when you save your project manually or automatically and how the changes to my-styles.less are reflected in the generated CSS file.
Mặc dù các cài đặt mặc định là đủ để chạy trình biên dịch thành công, nhưng chúng ta vẫn xem xét kỹ hơn chúng để xem hành vi của người theo dõi tệp có thể được tùy chỉnh như thế nào. Thay đổi hành động kích hoạt trình theo dõi tệpNgười theo dõi tệp thức dậy và khởi chạy bộ chuyển đổi ngay khi dự án của bạn được lưu thủ công (hoặc CTRL+S) hoặc tự động. Nói chung, mã của bạn được lưu tự động khi bạn chuyển trọng tâm từ IntelliJ & nbsp; IDEA (về việc hủy kích hoạt khung). Với trình theo dõi tệp, Auto-Save cũng được thực hiện khi bạn chỉnh sửa một tệp từ phạm vi của trình xem tệp. Do đó, bộ chuyển đổi có thể chạy tất cả thời gian bạn nhập, điều này có thể gây ra sự cố hiệu suất. Để giải quyết vấn đề, hãy tự động lưu trữ các tệp đã chỉnh sửa. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. . Chọn Trình xem tệp cần thiết (ít hơn trong ví dụ của chúng tôi) và nhấp vào thanh công cụ. Trong hộp thoại Chỉnh sửa tệp Watcher, mở rộng khu vực Tùy chọn nâng cao và xóa các tệp chỉnh sửa tự động để kích hoạt hộp kiểm Watcher.Less in our example) and click on the toolbar. In the Edit File Watcher dialog, expand the Advanced Options area and clear the Auto-save edited files to trigger the watcher checkbox. Thay đổi phạm viTheo mặc định, IntelliJ & NBSP; Ý tưởng theo dõi các thay đổi trong tất cả các tệp với phần mở rộng .SCSS trong toàn bộ dự án. Điều này làm việc cho ví dụ của chúng tôi. Tuy nhiên, bạn có thể thay đổi phạm vi để xử lý, ví dụ, chỉ có những thay đổi không được cam kết. Trong một dự án lớn, điều này sẽ tiết kiệm thời gian..scss extension in the entire project. This works for our example. However, you can change the scope to process, for example, only uncommitted changes. In a large project, this will save time. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , chọn Trình xem tệp cần thiết (ít hơn trong ví dụ của chúng tôi) và nhấp vào thanh công cụ. Trong hộp thoại Chỉnh sửa tệp theo dõi, chọn phạm vi áp dụng từ danh sách. Tìm hiểu thêm từ phạm vi và màu tập tin.Less in our example) and click on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list. Learn more from Scopes and file colors. Vị trí đầu ra tùy chỉnhTheo mặc định, các tệp .css và .csss.map được lưu trữ trong thư mục nơi tệp gốc và được hiển thị dưới dạng trẻ em trong cửa sổ công cụ dự án. Bạn có thể thay đổi hành vi mặc định này để lưu trữ tất cả các tệp .css và .css.map trong một thư mục riêng..css and .css.map files are stored in the folder where the original file is and are shown as its children in the Project tool window. You can change this default behavior to store all generated .css and .css.map files in a separate folder. Hãy bắt đầu với một trường hợp đơn giản. Giả sử bạn có tệp Custom_output.less trong root dự án.custom_output.less file in the project root. Ví dụ, hãy chỉnh sửa Custom_output.less, thay đổi giá trị của Sẽ rất thuận tiện để lưu trữ tất cả các đầu ra trong một thư mục riêng, ví dụ, CSS. Hãy tạo trình theo dõi tệp less_custom_output tùy chỉnh với thư mục CSS làm vị trí đầu ra.css. Let's create a custom Less_custom_output File Watcher with the css folder as the output location. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , sau đó tạo một trình theo dõi tệp ít hơn như mô tả ở trên. Cập nhật cài đặt mặc định như sau:
Lưu trình theo dõi tệp mới và đảm bảo nó được bật. Bây giờ, nếu bạn chỉnh sửa Custom_output.less, ví dụ, hãy thay đổi giá trị của Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốcBây giờ chúng ta hãy xem xét một ví dụ trong đó các tệp .less không được lưu trữ trong cấu trúc thư mục, ví dụ:.less files are stored in a folder structure, for example: Với trình theo dõi tệp mặc định, các tệp được tạo sẽ được lưu trữ bên cạnh các tệp .less gốc. Nếu chúng tôi sử dụng Trình xem tệp tùy chỉnh như được mô tả ở trên, tất cả các tệp được tạo sẽ được lưu trữ trong cùng một thư mục CSS:.less files. If we use the custom File Watcher as described above, all the generated files will be stored in one same css folder: Để có IntelliJ & nbsp; IDEA Bảo tồn cấu trúc thư mục, hãy tạo một trình theo dõi tệp tùy chỉnh khác. Nhấn CTRL+ALT+S để mở cài đặt IDE và chọn. , sau đó tạo một trình theo dõi tệp ít hơn như mô tả ở trên. Cập nhật cài đặt mặc định như sau:
Lưu trình theo dõi tệp mới và đảm bảo nó được bật. Bây giờ, nếu bạn chỉnh sửa Custom_output.less, ví dụ, hãy thay đổi giá trị của Cấu hình nổi bật cú phápBạn có thể định cấu hình làm nổi bật cú pháp ít/SASS/SCSS-nhận biết theo sở thích và thói quen của bạn.
Sửa đổi lần cuối: 29 tháng 7 năm 2022 |