Làm thế nào để biên dịch hoặc chuyển đổi sass / scss sang css với node-sass (không có Ruby)?

91

Tôi đã đấu tranh với việc thiết lập libsass vì nó không dễ dàng như trình chuyển đổi dựa trên Ruby. Ai đó có thể giải thích làm thế nào để:

  1. cài đặt libsass?
  2. sử dụng nó từ dòng lệnh?
  3. sử dụng nó với những người chạy nhiệm vụ như gulp và grunt?

Tôi có ít kinh nghiệm với trình quản lý gói và thậm chí còn ít hơn với người chạy tác vụ.

css  sass  gulp-sass  node-sass  libsass 
— Thoran
nguồn

Câu trả lời:

226

Tôi đã chọn trình triển khai node-sass cho libsass vì nó dựa trên node.js.

Cài đặt node-sass

  • (Điều kiện tiên quyết) Nếu bạn không có npm, hãy cài đặt Node.js trước.
  • $ npm install -g node-sasscài đặt node-sass trên toàn cầu -g.

Điều này hy vọng sẽ cài đặt tất cả những gì bạn cần, nếu không đọc libsass ở dưới cùng.

Cách sử dụng node-sass từ dòng lệnh và tập lệnh npm

Định dạng chung:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

Ví dụ:

  1. $ node-sass my-styles.scss my-styles.css biên dịch một tệp theo cách thủ công.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ biên dịch tất cả các tệp trong một thư mục theo cách thủ công.
  3. $ node-sass -w sass/ -o css/tự động biên dịch tất cả các tệp trong một thư mục bất cứ khi nào (các) tệp nguồn được sửa đổi. -wthêm theo dõi các thay đổi đối với (các) tệp.

Các tùy chọn hữu ích khác như 'nén' @ tại đây . Dòng lệnh là một giải pháp nhanh, tuy nhiên, bạn có thể sử dụng các trình chạy tác vụ như Grunt.js hoặc Gulp.js để tự động hóa quá trình xây dựng.

Bạn cũng có thể thêm các ví dụ trên vào các tập lệnh npm. Để sử dụng đúng cách các tập lệnh npm như một giải pháp thay thế cho gulp, hãy đọc bài viết toàn diện này @ css-tricks.com, đặc biệt là đọc về các tác vụ nhóm .

  • Nếu không có package.jsontệp nào trong thư mục dự án của bạn đang chạy $ npm initsẽ tạo một tệp . Sử dụng nó với -yđể bỏ qua các câu hỏi.
  • Thêm "sass": "node-sass -w sass/ -o css/"vào scriptstrong package.jsontệp. Nó sẽ trông giống như sau:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass sẽ biên dịch các tệp của bạn.

Cách sử dụng với gulp

  • $ npm install -g gulp cài đặt Gulp trên toàn cầu.
  • Nếu không có package.jsontệp nào trong thư mục dự án của bạn đang chạy $ npm initsẽ tạo một tệp . Sử dụng nó với -yđể bỏ qua các câu hỏi.
  • $ npm install --save-dev gulpcài đặt Gulp cục bộ. --save-devthêm gulpvào devDependenciestrong package.json.
  • $ npm install gulp-sass --save-dev cài đặt cục bộ gulp-sass.
  • Thiết lập gulp cho dự án của bạn bằng cách tạo một gulpfile.jstệp trong thư mục gốc dự án của bạn với nội dung sau:
'use strict';
var gulp = require('gulp');

Một ví dụ cơ bản để vận chuyển

Thêm mã này vào gulpfile.js của bạn:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sasschạy tác vụ trên để biên dịch (các) tệp .scss trong sassthư mục và tạo (các) tệp .css trong cssthư mục.

Để làm cho cuộc sống dễ dàng hơn, hãy thêm một chiếc đồng hồ để không phải biên dịch nó theo cách thủ công. Thêm mã này vào gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Tất cả đã được thiết lập ngay bây giờ! Chỉ cần chạy tác vụ đồng hồ:

$ gulp sass:watch

Cách sử dụng với Node.js

Như tên của node-sass ngụ ý, bạn có thể viết các tập lệnh node.js của riêng mình để chuyển ngữ. Nếu bạn tò mò, hãy xem trang dự án node-sass.

Còn về libsass?

Libsass là một thư viện cần được xây dựng bởi một người triển khai như sassC hoặc trong trường hợp của chúng ta là node-sass. Node-sass chứa một phiên bản libsass được xây dựng mà nó sử dụng theo mặc định. Nếu tệp xây dựng không hoạt động trên máy của bạn, nó sẽ cố gắng tạo libsass cho máy của bạn. Quá trình này yêu cầu Python 2.7.x (3.x không hoạt động kể từ hôm nay). Ngoài ra:

LibSass yêu cầu GCC 4.6+ hoặc Clang / LLVM. Nếu hệ điều hành của bạn cũ hơn, phiên bản này có thể không biên dịch. Trên Windows, bạn cần MinGW với GCC 4.6+ hoặc VS 2013 Update 4+. Cũng có thể xây dựng LibSass với Clang / LLVM trên Windows.

— Thoran
nguồn
1
@PublicHandle Có lẽ đó là lý do, tôi không nhớ. node-sasslà gulp-sassphụ thuộc của , vì vậy không cần phải cài đặt nó cục bộ.
— Thoran
1
@PublicHandle cài đặt toàn cầu của gulp là cần thiết nếu bạn muốn chạy các tác vụ gulp từ dòng lệnh.
— Thoran
1
@Thoran Ah, điều đó có lý khi nếu node-sass là một phụ thuộc của gulp-sass thì nó không cần thiết cục bộ trong khi bản thân gulp là cần thiết ở cả hai nơi để nó có thể chạy trên dòng lệnh và được đưa vào như một phụ thuộc trong dự án. Cảm ơn một lần nữa, bài viết tuyệt vời!
— PublicHandle
1
@Thoran Tôi đang cố gắng tìm hiểu xem liệu tôi có thể tránh sử dụng trình chạy tác vụ như gulp hoặc grunt và viết một tập lệnh npm đơn giản thực hiện những gì tôi cần hay không. Tôi đã xem xét node-sass, dòng lệnh rõ ràng sử dụng các vòng lặp và vòng lặp trên các tệp. Tôi đoán tốt nhất là chỉ cần sao chép mã đó.
— Bernhard Döbler
1
Vì vậy, để tránh sử dụng Ruby , người ta có thể sử dụng node.js , một phiên bản cụ thể của Python VÀ một thư viện C ++ mà người ta cần biên dịch nếu sử dụng Windows? Điều đó đơn giản hóa mọi thứ rất nhiều.
— toniedzwiedz
5

Việc cài đặt các công cụ này có thể khác nhau trên các hệ điều hành khác nhau.

Trong Windows, node-sass hiện hỗ trợ VS2015 theo mặc định, nếu bạn chỉ có VS2013 trong hộp và gặp bất kỳ lỗi nào trong khi chạy lệnh, bạn có thể xác định phiên bản VS bằng cách thêm: --msvs_version = 2013. Điều này được ghi nhận trên trang node-sass npm .

Vì vậy, dòng lệnh an toàn hoạt động trên Windows với VS2013 là: npm install --msvs_version = 2013 gulp node-sass gulp-sass

— Brian Ng
nguồn
3

Trong Windows 10 sử dụng nút v6.11.2 và npm v3.10.10 , để thực thi trực tiếp trong bất kỳ thư mục nào:

> node-sass [options] <input.scss> [output.css]

Tôi chỉ làm theo hướng dẫn trong Github của node-sass :

  1. Thêm các điều kiện tiên quyết của node-gyp bằng cách chạy với tư cách Quản trị viên trong Powershell (mất một lúc):

    > npm install --global --production windows-build-tools

  2. Trong một shell dòng lệnh thông thường ( Win+ R+ cmd + Enter), hãy chạy:

    > npm install -g node-gyp
> npm install -g node-sass

    Nơi -gđặt các gói này dưới %userprofile%\AppData\Roaming\npm\node_modules. Bạn có thể kiểm tra rằng npm\node_modules\node-sass\bin\node-sasshiện đã tồn tại.

  3. Kiểm tra xem biến môi trường tài khoản cục bộ (không phải Hệ thống) của bạn PATH có chứa:

    %userprofile%\AppData\Roaming\npm

    Nếu không có đường dẫn này, npm và nút có thể vẫn chạy, nhưng các tệp bin của mô-đun thì không!

Đóng shell trước đó và mở lại shell mới và chạy hoặc > node-gyphoặc > node-sass.

Ghi chú:

  • Điều windows-build-tools này có thể không cần thiết (nếu không có quá trình biên dịch nào được thực hiện? Tôi muốn đọc nếu ai đó đã tạo nó mà không cài đặt các công cụ này), nhưng nó đã thêm vào tài khoản quản trị viên GYP_MSVS_VERSIONbiến môi trường 2015dưới dạng một giá trị.
  • Tôi cũng có thể chạy trực tiếp các mô-đun khác với các tệp bin , chẳng hạn như > uglifyjs main.js main.min.jsvà> mocha
— Armfoot
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.