Як скомпілювати або перетворити sass / scss в css за допомогою node-sass (без Ruby)?

Я боровся з налаштуванням libsass, оскільки він був не таким прямим, як перекладач на основі Ruby. Хтось може пояснити, як:

1. встановити libsass?
2. використовувати його з командного рядка?
3. використовувати його з бігунками завдань, такими як глотка та бурчання?

Я маю невеликий досвід роботи з менеджерами пакунків і тим менше з програмами, що виконують завдання.

Я вибрав реалізатор node-sass для libsass, оскільки він базується на node.js.

Встановлення node-sass

• (Обов’язкова умова) Якщо у вас немає npm, спочатку встановіть Node.js.
• $ npm install -g node-sassвстановлює node-sass глобально -g.

Сподіваємось, це встановить все, що вам потрібно, якщо не читати libsass внизу.

Як використовувати node-sass із командного рядка та сценаріїв npm

Загальний формат:

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

Приклади:

1. $ node-sass my-styles.scss my-styles.css компілює один файл вручну.
2. $ node-sass my-sass-folder/ -o my-css-folder/ компілює всі файли в папці вручну.
3. $ node-sass -w sass/ -o css/автоматично компілює всі файли в папці, щойно файли-джерела змінюються. -wдодає годинник для змін до файлів.

Інші корисні варіанти, такі як "стиснення" @ тут . Командний рядок хороший для швидкого рішення, однак для автоматизації процесу збірки ви можете використовувати програми для запуску завдань, такі як Grunt.js або Gulp.js.

Ви також можете додати наведені вище приклади до сценаріїв npm. Щоб правильно використовувати сценарії npm як альтернативу ковтку, прочитайте цю вичерпну статтю @ css-tricks.com, особливо прочитайте про групування завдань .

• Якщо package.jsonу вашому каталозі проекту немає файлу, його $ npm initбуде створено. Використовуйте його, -yщоб пропустити питання.
• Додати "sass": "node-sass -w sass/ -o css/"до scriptsу package.jsonфайл. Це повинно виглядати приблизно так:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass скомпілює ваші файли.

Як використовувати при ковтку

• $ npm install -g gulp встановлює Gulp глобально.
• Якщо package.jsonу вашому каталозі проекту немає файлу, його $ npm initбуде створено. Використовуйте його, -yщоб пропустити питання.
• $ npm install --save-dev gulpвстановлює Gulp локально. --save-devдодає gulpдо devDependenciesв package.json.
• $ npm install gulp-sass --save-dev встановлює gulp-sass локально.
• Налаштуйте глотку для свого проекту, створивши gulpfile.jsфайл у кореневій папці проекту з таким вмістом:

'use strict';
var gulp = require('gulp');

Основний приклад для транспіляції

Додайте цей код до свого gulpfile.js:

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 sassзапускає вищевказане завдання, яке компілює файли .scss у sassпапці та генерує файли .css у cssпапці.

Щоб полегшити життя, додамо годинник, щоб нам не довелося складати його вручну. Додайте цей код до свого gulpfile.js:

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

Все готово! Просто запустіть завдання годинника:

$ gulp sass:watch

Як використовувати з Node.js

Як випливає з назви node-sass, ви можете написати власні сценарії node.js для транпіляції. Якщо вам цікаво, перегляньте сторінку проекту node-sass.

А як щодо libsass?

Libsass - це бібліотека, яку потрібно створити таким реалізатором, як sassC або в нашому випадку node-sass. Node-sass містить вбудовану версію libsass, яку він використовує за замовчуванням. Якщо файл збірки не працює на вашій машині, він намагається створити libsass для вашої машини. Цей процес вимагає Python 2.7.x (3.x сьогодні не працює). В додаток:

LibSass вимагає GCC 4.6+ або Clang / LLVM. Якщо ваша ОС старіша, ця версія може не компілюватися. У Windows вам потрібна MinGW з GCC 4.6+ або VS 2013 Update 4+. Також можна побудувати LibSass за допомогою Clang / LLVM для Windows.

Встановлення цих інструментів може відрізнятися в різних ОС.

В ОС Windows node-sass наразі підтримує VS2015 за замовчуванням, якщо у вашому вікні є лише VS2013 і при запуску команди виникає помилка, ви можете визначити версію VS, додавши: --msvs_version = 2013. Це зазначено на сторінці npm-sass npm .

Отже, безпечним командним рядком, який працює в Windows з VS2013, є: npm install --msvs_version = 2013 gulp node-sass gulp-sass

У Windows 10 за допомогою node v6.11.2 та npm v3.10.10 для виконання безпосередньо в будь-якій папці:

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

Я виконував лише вказівки у node-sass Github :

1. Додайте передумови node-gyp , запустивши як адміністратор у Powershell (це займе деякий час):

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

2. У звичайній оболонці командного рядка ( Win+ R+ cmd + Enter) виконайте:

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

   -gПоміщає ці пакети під %userprofile%\AppData\Roaming\npm\node_modules. Ви можете перевірити, що npm\node_modules\node-sass\bin\node-sassзараз існує.

3. Перевірте, чи змінна середовища вашого локального облікового запису (не Системного) PATH містить:

   %userprofile%\AppData\Roaming\npm
   

   Якщо цього шляху немає, npm і node все ще можуть працювати, але файли bin модулів ні!

Закрийте попередню оболонку та знову відкрийте нову та запустіть > node-gypабо > node-sass.

Примітка:

• Можливо, windows-build-tools це не потрібно (якщо компіляція не виконується? Я хотів би прочитати, якщо хтось зробив це, не встановивши ці інструменти), але це додало до облікового запису адміністратора GYP_MSVS_VERSIONзмінну середовища із 2015значенням.
• Я також можу запустити безпосередньо інші модулі з файлами bin , такі як > uglifyjs main.js main.min.jsі> mocha