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.

Trước khi bạn bắt đầu

  1. Hãy chắc chắn rằng bạn có Node.js trên máy tính của bạn.

  2. 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.

  3. Đả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.

Cài đặt SASS/SCSS

  • Trong thiết bị đầu cuối nhúng (ALT+F12), loại:Terminal (Alt+F12) , type:

    npm install -g sass

    Tìm hiểu thêm từ trang web chính thức của SASS.

Cài đặt ít hơn

  • Trong thiết bị đầu cuối nhúng (ALT+F12), loại:Terminal (Alt+F12) , type:

    npm install --global less

    Tìm hiểu thêm từ trang web chính thức của SASS.

Cài đặt ít hơn

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.

Tìm hiểu thêm từ người theo dõi tập tin.

  1. 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.

  2. Tạo trình xem tệp

    Hướng dẫn scss to css intellij - scss đến css intellij
    or press Alt+Insert. Depending on the tool you are going to use, choose the Less, Sass, or SCSS predefined template from the list.

  3. 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.

    • Nhấp hoặc nhấn Alt+Chèn. Tùy thuộc vào công cụ bạn sẽ sử dụng, chọn mẫu ít, SASS hoặc SCS được xác định trước từ danh sách. for Less.

    • Trong trường chương trình, chỉ định đường dẫn đến kho lưu trữ trình biên dịch tùy thuộc vào mẫu được xác định trước đã chọn. for Sass/SCSS.

    Ít hơn cho ít hơn. and choose the file location in the dialog that opens.

  4. 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.

Hướng dẫn scss to css intellij - scss đến css intellij

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.

  1. Giả sử dự án của bạn được cấu trúc như sau:SCSS: open the Settings/Preferences dialog (Ctrl+Alt+S), go to , click on the toolbar, and select SCSS from the list.

    Hướng dẫn scss to css intellij - scss đến css intellij
  2. Như bạn có thể thấy, _grid.scss được nhập vào trang.scss. Ví dụ dưới đây cho thấy cách trang.scss được biên dịch thành CSS khi bạn lưu dự án của mình theo cách thủ công hoặc tự động và cách các thay đổi thành _grid.scss được phản ánh trong tệp CSS được tạo.New File Watcher dialog, that opens, all the mandatory fields are already filled in.

    Hướng dẫn scss to css intellij - scss đến css intellij

    Tạo một trình xem tệp thuộc loại SCSS: Mở hộp thoại Cài đặt/Tùy chọn (CTRL+ALT+S), truy cập, nhấp vào thanh công cụ và chọn SCSS từ danh sách.

  3. Trong hộp thoại Người theo dõi tệp mới, mở ra, tất cả các trường bắt buộc đã được điền vào.grid.scss, for example, replace margin-left: 0; at line 31 with margin-left: 12px;. This triggers our File Watcher and the compiler processes Page.scss. As a result, two files are generated and shown nested under Page.scss:

    • Trên thực tế, các cài đặt này là đủ để chạy trình biên dịch thành công. with compiled CSS code

    • Ví dụ, chúng ta hãy thay đổi lưới.scss thay thế margin-left: 0; ở dòng 31 bằng margin-left: 12px;. Điều này kích hoạt trình theo dõi tệp của chúng tôi và trang trình biên dịch xử lý trang.scss. Do đó, hai tệp được tạo và hiển thị lồng nhau trong trang.scss: with source maps that let you step through your app during a debugging session.

    Hướng dẫn scss to css intellij - scss đến css intellij

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.

Hướng dẫn scss to css intellij - scss đến css intellij

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.

Hướng dẫn scss to css intellij - scss đến css intellij

Thay đổi phạm vi

Theo 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.

Hướng dẫn scss to css intellij - scss đến css intellij

Vị trí đầu ra tùy chỉnh

Theo 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.

Hướng dẫn scss to css intellij - scss đến css intellij

Ví dụ, hãy chỉnh sửa Custom_output.scss, thay thế fill-opacity: abs(50); ở dòng 6 bằng fill-opacity: abs(60);. Với cấu hình trình xem tệp mặc định, các tệp được tạo Custom_output.css và Custom_output.css.map sẽ được lưu trữ trong root dự án và được hiển thị dưới dạng trẻ em của Custom_output.scss.custom_output.scss, for example, replace fill-opacity: abs(50); at line 6 with fill-opacity: abs(60);. With the default File Watcher configuration, the generated files custom_output.css and custom_output.css.map will be stored in the project root and shown as children of custom_output.scss.

Hướng dẫn scss to css intellij - scss đến css intellij

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:

  • Trong trường Đối số, loại:Arguments field, type:

    $ FileName $: $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSED $ .CSSS

  • Trong các đường dẫn đầu ra để làm mới trường, hãy loại:Output paths to refresh field, type:

    $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENSED $ .CSS: $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSENT $ .CSS.MAP

Hướng dẫn scss to css intellij - scss đến css intellij

Lưu trình theo dõi tệp mới và đảm bảo nó được bật.

Hướng dẫn scss to css intellij - scss đến css intellij

Bây giờ, nếu bạn chỉnh sửa Custom_output.scss, ví dụ, hãy thay thế fill-opacity: abs(50); ở dòng 6 bằng fill-opacity: abs(60);, IntelliJ & NBSP; IDEA tạo thư mục CSS và lưu trữ các tệp Custom_output.css và Custom_output.css.map được tạo trong đó.custom_output.scss, for example, replace fill-opacity: abs(50); at line 6 with fill-opacity: abs(60);, IntelliJ IDEA creates a css folder and stores the generated custom_output.css and custom_output.css.map files in it.

Hướng dẫn scss to css intellij - scss đến css intellij

Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốc

Bâ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:

Hướng dẫn scss to css intellij - scss đến css intellij

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:

Hướng dẫn scss to css intellij - scss đến css intellij

Để 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:

  • Trong trường Đối số, loại:Arguments field, type:

    $ FileName $: $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSED $ .CSSS

  • Trong các đường dẫn đầu ra để làm mới trường, hãy loại:Output paths to refresh field, type:

    $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENSED $ .CSS: $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSENT $ .CSS.MAP

Hướng dẫn scss to css intellij - scss đến css intellij

Lưu trình theo dõi tệp mới và đảm bảo nó được bật.

Hướng dẫn scss to css intellij - scss đến css intellij

Bây giờ, nếu bạn chỉnh sửa Custom_output.scss, ví dụ, hãy thay thế fill-opacity: abs(50); ở dòng 6 bằng fill-opacity: abs(60);, IntelliJ & NBSP; IDEA tạo thư mục CSS và lưu trữ các tệp Custom_output.css và Custom_output.css.map được tạo trong đó.custom_output_body.scss, custom_output_header.scss, or custom_output_footer.scss, IntelliJ IDEA creates a css folder with the subfolders' structure that preserves the structure of styles_structured.

Hướng dẫn scss to css intellij - scss đến css intellij

Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốc

Bâ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ụ:

Hướng dẫn scss to css intellij - scss đến css intellij

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.

  1. Để 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.Less: open the Settings/Preferences dialog (Ctrl+Alt+S), go to , click on the toolbar, and select Less from the list.

    Hướng dẫn scss to css intellij - scss đến css intellij

    $ FileName $: $ ProjectFileDir $/CSS/$ FileDirelativetOprojectroot $/$ filenamewithouteXtension $ .csssYes in the Enable File Watcher to compile LESS to CSS? pane at the top of the editor tab with a .less file.

    Hướng dẫn scss to css intellij - scss đến css intellij
  2. $ ProjectFileDIR $/CSS/$ fileRelativetOprojectroot $/$ filenamewithoutExtension $ .CSS: $ ProjectFileDir $/CSS/$ fileDirrelativetOprojectroot $/$ filenamewithoutExtension $ .css.mapNew File Watcher dialog, that opens, all the mandatory fields are already filled in.

    Hướng dẫn scss to css intellij - scss đến css intellij

    Bây giờ, nếu bạn chỉnh sửa Custom_output_body.scss, Custom_output_header.scss hoặc Custom_output_footer.scss, IntelliJ & NBSP; IDEA tạo ra một thư mục CSS với cấu trúc của Subfologists bảo toàn cấu trúc của style_structured.

  3. Ví dụ, chúng ta hãy thay đổi styles của tôi. Kết quả là, hai tệp được tạo và hiển thị lồng nhau theo mẫu của tôi.less:my-styles.less, for example, change the value of @color at line 1. This triggers our File Watcher. As a result, two files are generated and shown nested under my-styles.less:

    • my-styles.css với mã CSS được biên dịch with compiled CSS code

    • My-styles.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. with source maps that let you step through your app during a debugging session.

    Hướng dẫn scss to css intellij - scss đến css intellij

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ệp

Ngườ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.

Hướng dẫn scss to css intellij - scss đến css intellij

Thay đổi phạm vi

Theo 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.

Hướng dẫn scss to css intellij - scss đến css intellij

Vị trí đầu ra tùy chỉnh

Theo 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.

Hướng dẫn scss to css intellij - scss đến css intellij

Ví dụ, hãy chỉnh sửa Custom_output.less, thay đổi giá trị của @color ở dòng 1. Với cấu hình trình xem tệp mặc định, các tệp được tạo Custom_output.css và Custom .ít hơn.custom_output.less, for example, change the value of @color at line 1. With the default File Watcher configuration, the generated files custom_output.css and custom_output.css.map will be stored in the project root and shown as children of custom_output.less.

Hướng dẫn scss to css intellij - scss đến css intellij

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:

  • Trong trường Đối số, loại:Arguments field, type:

    $ FileName $ $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSED $ .CSS-Source-Map

  • Trong các đường dẫn đầu ra để làm mới trường, hãy loại:Output paths to refresh field, type:

    $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENSION $ .CSS $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENCENT $ .CSS.MAP

Hướng dẫn scss to css intellij - scss đến css intellij

Lưu trình theo dõi tệp mới và đảm bảo nó được bật.

Hướng dẫn scss to css intellij - scss đến css intellij

Bây giờ, nếu bạn chỉnh sửa Custom_output.less, ví dụ, hãy thay đổi giá trị của @color ở dòng 1, IntelliJ & nbsp; Idea tạo thư mục CSS và lưu trữ các tệp Custom_output.css và Custom_output.css.map được tạo trong đó.custom_output.less, for example, change the value of @color at line 1, IntelliJ IDEA creates a css folder and stores the generated custom_output.css and custom_output.css.map files in it.

Hướng dẫn scss to css intellij - scss đến css intellij

Vị trí đầu ra tùy chỉnh: Bảo tồn cấu trúc thư mục gốc

Bâ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:

Hướng dẫn scss to css intellij - scss đến css intellij

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:

Hướng dẫn scss to css intellij - scss đến css intellij

Để 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:

  • Trong trường Đối số, loại:Arguments field, type:

    $ FileName $ $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTINSED $ .CSS-Source-Map

  • Trong các đường dẫn đầu ra để làm mới trường, hãy loại:Output paths to refresh field, type:

    $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENSION $ .CSS $ ProjectFileDIR $/CSS/$ FILENAMEWITHOUTEXTENCENT $ .CSS.MAP

Hướng dẫn scss to css intellij - scss đến css intellij

Lưu trình theo dõi tệp mới và đảm bảo nó được bật.

Hướng dẫn scss to css intellij - scss đến css intellij

Bây giờ, nếu bạn chỉnh sửa Custom_output.less, ví dụ, hãy thay đổi giá trị của @color ở dòng 1, IntelliJ & nbsp; Idea tạo thư mục CSS và lưu trữ các tệp Custom_output.css và Custom_output.css.map được tạo trong đó.custom_output_body.less, custom_output_header.less, or custom_output_footer.less, IntelliJ IDEA creates a css folder with the subfolders' structure that preserves the structure of styles_structured.

Hướng dẫn scss to css intellij - scss đến css intellij

Cấu hình nổi bật cú pháp

Bạ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.

  1. Trong hộp thoại Cài đặt/Tùy chọn (CTRL+ALT+S), hãy truy cập.Settings/Preferences dialog (Ctrl+Alt+S), go to .

  2. Chọn bảng màu, chấp nhận các cài đặt tô sáng được kế thừa từ mặc định hoặc tùy chỉnh chúng như được mô tả trong màu sắc và phông chữ.

Sửa đổi lần cuối: 29 tháng 7 năm 2022