Cài đặt SCSS tự động biên dịch code CSS

Cài đặt SCSS tự động biên dịch code CSS

  • Sau khi cài đặt SCSS biên dịch được CSS như bài trước đã trình bày, bài học này sẽ giúp các bạn cài đặt tự động biên dịch SCSS sang CSS mà không cần mỗi lần save phải chạy lại câu lệnh thực thi.

Cấu hình SCSS tự động biên dịch CSS

  • Để mỗi lần save file SCSS thì chương trình sẽ tự động biên dịch sang file CSS mà không cần chạy lại lệnh biên dịch, ta lần lược làm các bước sau:
    • Tạm thời xóa 2 file style.css và style.css.map đi, vì khi biên dịch sẽ tự động tạo file mới.
    • Cài đặt npm bên trong thư mục scss-project.
    • Cài đặt node-sass
    • Tạo file package.json
    • Chạy lệnh biên dịch tự động
  • Cấu trúc thư mục hiện tại như sau:

scss-project

  • style.scss style.scss

Cài đặt npm bên trong thư mục scss-project:

npm install

SCSS installation

  • Khi này bên trong thư mục scss-project sẽ tự động tạo file package-lock.json là ta đã cài đặt thành công.

Cài đặt node-sass

npm install node-sass

SCSS installation

  • Khi này chương trình sẽ tự động tạo folder node_modules, nơi đây chứa các modules cần cho việc biên dịch.
  • Ta có cấu trúc thư mục như sau:

scss-project

  • node_modules

    • ...
  • package-lock.json package-lock.json
  • style.scss style.scss

Tạo file package.json

Cách tạo đơn giản nhất là copy từ file package-lock.json đặt lại tên package.json, sau đó thay đổi nội dung bên trong như sau:

{
  "dependencies": {
    "node-sass": "^4.7.2"
  },
  "scripts": {
    "scss": "node-sass --watch style.scss -o css"
  }
}
  • style.scss tên file, hoặc nếu file bên trong thư mục thì ghi rõ luôn thư mục, ví dụ scss/style.scss.
  • css tên thư mục sẽ được tạo tự động, file sẽ được lưu tại đây.

Chạy lệnh biên dịch tự động

npm run scss

SCSS installation

  • Tới đây ta đã hoàn thành cài đặt biên dịch tự động SCSS sang CSS, các bạn có thể thử bằng cách thay đổi code của file style.scss, save lại, ta sẽ thấy chương trình tự động biên dịch nội dung của file /css/style.css, mỗi lần thay đổi thì nội dung file style.css cũng thay đổi theo.
  • Lưu ý: mỗi khi thay đổi nội dung file package.json, ví dụ như chỉnh lại tên thư mục lưu file css, thì ta cần chạy lệnh biên dịch, muốn vậy ta cần thoát mode cmd đang chạy bằng cách nhấn tổ hợp phím Ctrl + C, gõ y, sau đó chạy lại lệnh biên dịch tự động là được.
  • Từ giờ, mỗi khi bạn muốn chạy lệnh tự động biên dịch, bạn cần trỏ tới scss-project và chạy lệnh biên dịch npm run scss.

Cài đặt SCSS

SCSS - cú pháp