Hướng dẫn chỉnh File Watcher SCSS trong WebStorm

WebStorm là một phần mềm chuyên nghiệp để viết code liên quan đến web. Chỉnh sửa file HTML, CSS, JS, .. chuyên nghiệp. Ngoài tất cả các tính...

WebStorm là một phần mềm chuyên nghiệp để viết code liên quan đến web. Chỉnh sửa file HTML, CSS, JS, .. chuyên nghiệp. Ngoài tất cả các tính năng khác của các IDE khác, nó còn được hỗ trợ bởi những tính năng thông minh của họ hàng Jetbrains. Một fan cuồng của Jetbreain, nên hôm nay sẽ hướng dẫn cấu hình để sử dụng SCSS trong WebStorm (Áp dụng với PHPStorm cũng tương tự)
Tải về WebStorm : https://www.jetbrains.com/webstorm/

1, Vì sao chọn SCSS chứ không phải vì CSS

Thực ra thì để trình duyệt web chỉ đọc được file CSS, nên dù sao bạn cũng phải biên dịch từ SCSS qua CSS. Nhưng vấn đề là CSS khó quản lý, SCSS lại có thể khắc phục và mở rộng để khiến code CSS dễ quản lý, dễ hiểu hơn.
Bài này khá chi tiết về sự so sánh: https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944

2, Cấu hình SCSS trong File Watcher của WebStorm

Nguyên lý của SCSS là sẽ biên dịch thành CSS. Trong WebStorm, mỗi khi sử dụng Ctrl+S ở file SCSS thì nó sẽ tự sinh ra file CSS tương ứng.


Ở hình trên, sau khi biên dịch thì file style.scss sẽ tạo ra 2 file style.css và style.css.map
Cài đặt SCSS:

Cài môi trường chạy SCSS cho Window
Node.JS: https://nodejs.org/en/
  • Cài SCSS/SASS, mở Cmd chạy lệnh: 
    • window
[npm install -g sass]

    • linux
[npm install node-sass --unsafe-perms] 

Cấu hình SCSS trong File Watcher của WebStorm

Mở WebStorm, ấn tổ hợp Ctrl+Alt+S => Tools=> File Watcher
Sau đó, cấu hình mục Edit Watcher như sau:

Trong đó cần chú ý:

Program: 
C:\Users\##tencuaPC\AppData\Roaming\npm\sass
Arguments:
  • Code 1: Tạo ra file map và file css
[$FileName$ $FileNameWithoutExtension$.css]
  • Code 2: Dùng đoạn sau để minified file css luôn
[$FileName$ $FileNameWithoutExtension$.css --style compressed]
 Output paths to refresh:
[$FileNameWithoutExtension$.css]

OK, vậy là file SCSS đã cấu hình trong file Watcher của Webstorm thành công. Mỗi khi cần dùng, chỉ cần Ctrl+S trên file .scss là xong.
  • [message]
    • Chú ý:
      • Khi nhúng đường dẫn vào file HTML, nhớ dẫn file .css. Không dẫn file .scss nhé

COMMENTS

BLOGGER
Tên

bài viết hay,4,Bài viết khác,1,cấu trúc dữ liệu và giải thuật,3,fithou,36,ghim,4,giải tích 2,1,Hướng dẫn,5,Lập trình C,1,lập trình hướng đối tượng,3,Lập trình java,1,phần mềm,2,phần mềm lập trình,2,sách,1,tác phẩm đồ họa,3,tản mạn,4,Thiết kế web,3,thực hành lập trình cơ sở,18,thực hành lập trình hướng đối tượng,16,
ltr
item
Blog NDanh: Hướng dẫn chỉnh File Watcher SCSS trong WebStorm
Hướng dẫn chỉnh File Watcher SCSS trong WebStorm
https://1.bp.blogspot.com/-lagdplrW6sc/Xl4j5yzpUfI/AAAAAAAAdTQ/lHVJUGDrJ7UVWEQD8WYohIyDYjDfnwVUgCLcBGAsYHQ/s1600/1.jpg
https://1.bp.blogspot.com/-lagdplrW6sc/Xl4j5yzpUfI/AAAAAAAAdTQ/lHVJUGDrJ7UVWEQD8WYohIyDYjDfnwVUgCLcBGAsYHQ/s72-c/1.jpg
Blog NDanh
https://blog.ndanh.com/2020/03/huong-dan-cai-scss-trong-file-watcher-cua-webstorm.html
https://blog.ndanh.com/
https://blog.ndanh.com/
https://blog.ndanh.com/2020/03/huong-dan-cai-scss-trong-file-watcher-cua-webstorm.html
true
1596452775547375681
UTF-8
Tải tất cả bài viết Không tìm thấy bài viết nào XEM TẤT CẢ Đọc thêm Trả lời Hủy trả lời Xóa Bởi Trang chủ PAGES POSTS Xem tất cả Bài viết đề xuất CHỦ ĐỀ LƯU TRỮ SEARCH TẤT CẢ BÀI VIẾT Không tìm thấy nội dung của bạn Quay về trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow CHIA SẺ ĐỂ XEM NỘI DUNG Bước 1: Chia sẻ lên facebook chế độ công khai Bước 2: Vào facebook, ấn vào bài đã chia sẻ công khai để hiện nội dung! Click Copy All Code Select All Code Code của bạn đã được copy Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content