Làm cách nào để biên dịch scss thành css trong windows?

Sass là một công cụ tuyệt vời để làm cho CSS năng động hơn, nhưng nó vẫn là gánh nặng đối với nhiều người trong chúng ta vì các cài đặt biên dịch. Hãy xem cách chúng tôi có thể thiết lập một cấu hình tối thiểu nhưng hoạt động tốt

Tôi nghĩ cách dễ nhất để biên dịch Sass là thông qua các tập lệnh npm. Sử dụng các tập lệnh npm, chúng ta có thể chạy bất kỳ lệnh shell nào - được cấu hình sẵn, đã cài đặt - với một dòng đơn giản. Sass đi kèm với giao diện dòng lệnh (CLI), chúng ta có thể định cấu hình rộng rãi;

Phiên bản hiện tại của Sass là 1. 42. 1 và viết trên Dart. Chúng tôi có hai gói không dùng nữa có tên LibSass và Node Sass. Trong hướng dẫn này, chúng tôi - và bạn nên - sử dụng Dart Sass, đây là cài đặt mặc định khi cài đặt khi chúng tôi chạy lệnh npm install sass

1. Cài đặt nút. js trên hệ thống của bạn

Để sử dụng npm (để cài đặt Sass), trước tiên chúng ta phải cài đặt Node. js, điều mà chúng ta có thể dễ dàng thực hiện. Truy cập trang web chính thức và tải xuống trình cài đặt có liên quan (dựa trên hệ điều hành) hoặc sử dụng trình quản lý gói dòng lệnh của bạn như Homebrew hoặc Chocolatey

2. Khởi tạo NPM

Sau khi cài đặt, chúng ta có thể truy cập lệnh npm để khởi tạo các dự án mới và quản lý các phụ thuộc. Việc khởi tạo có nghĩa là tạo tệp package.json nơi chúng tôi lưu trữ cấu hình của mình

Mở thiết bị đầu cuối của bạn, điều hướng đến thư mục gốc của dự án và chạy

bash
npm init

Trả lời các câu hỏi (mà bạn có thể sửa đổi sau) hoặc/và nhấn enter. Sau khi khởi tạo, tệp package.json của chúng ta sẽ trông như thế này

json
{
  "name": "sass-compile",
  "version": "1.0.0",
  "description": "A simple sass compile config.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adam",
  "license": "ISC"
}

3. Cài đặt Sass

Để cài đặt Sass, chúng ta phải chạy lệnh npm sau

bash
npm install sass --save-dev

Cờ

json
{
  "name": "sass-compile",
  "version": "1.0.0",
  "description": "A simple sass compile config.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adam",
  "license": "ISC"
}

json
{
  "name": "sass-compile",
  "version": "1.0.0",
  "description": "A simple sass compile config.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adam",
  "license": "ISC"
}

Bây giờ chúng tôi có chức năng Sass với quyền truy cập vào CLI đã đề cập trước đó bằng các lệnh của nó

4. Đặt các lệnh biên dịch

Chúng tôi có thể thêm bất kỳ tập lệnh mới nào trong đối tượng tập lệnh. Chỉ cần xóa cái mặc định (có tên là test) và thêm vào như sau

json
"scripts": {
  "sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css",
  "sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css"
}

Như bạn thấy, chúng tôi thiết lập hai tập lệnh để biên dịch Sass

• nhà phát triển. đó là cho mục đích phát triển. Nó không bị nén, có bản đồ nguồn và trình theo dõi (để chạy cho đến khi chúng tôi dừng nó và theo dõi các thay đổi)
• sản xuất. đó là làm cho mã sản xuất của chúng tôi. Nó được nén, không có bản đồ nguồn và chỉ chạy một lần

Bản đồ nguồn là gì? . Điều này rất hữu ích vì chúng tôi có thể thấy tên tệp gốc khi chúng tôi gỡ lỗi CSS trong công cụ dành cho nhà phát triển

Cấu trúc thư mục dự án của chúng tôi (nên) trông như thế này

sass-compile/
├── assets/
│   ├── css/
│   │   └── main.css
│   └── scss/
│       ├── assets/
│       │   ├── _footer.scss
│       │   └── _header.scss
│       └── main.scss
├── node-modules/
└── package.json

Chúng tôi biên dịch các tệp Sass của mình từ thư mục

json
{
  "name": "sass-compile",



 "version": "1.0.0",
 "description": "A simple sass compile config.",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Adam",
 "license": "ISC"
}

json
{
  "name": "sass-compile",
  "version": "1.0.0",
  "description": "A simple sass compile config.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adam",
  "license": "ISC"
}

Để biết thêm thông tin về các cờ (văn bản trong lệnh thống kê với —), vui lòng truy cập trang CLI chính thức

Như bạn thấy, các tập lệnh npm hoạt động giống như một bí danh (hiện tại chúng tôi chỉ sử dụng Sass CLI). Bạn có thể chạy bất kỳ lệnh nào trực tiếp trong thiết bị đầu cuối của mình (theo bất kỳ thứ tự nào hoặc song song), nhưng ví dụ này không thể hiện hết tiềm năng. Xin lưu ý rằng bài viết này chỉ nói về trình biên dịch Sass. Dựa trên các nhu cầu khác nhau, nó có thể phức tạp hơn một chút và có cấu trúc hơn

5. Chạy tập lệnh

Sau các bước trước, tất cả những gì chúng ta cần là chạy các tập lệnh của mình dựa trên tất cả các nhu cầu. Nếu bạn phát triển, sau đó sử dụng

Làm cách nào để biên dịch tệp SCSS thành CSS?

SCSS có được biên dịch thành CSS không?

Làm cách nào để biên dịch mã SCSS?

Làm cách nào để biên dịch SCSS thành CSS trong Visual Studio Code?