Как скомпилировать или преобразовать sass/scss в css с помощью node -sass (без Ruby)?

Я боролся с настройкой libsass, поскольку это было не так прямолинейно, как транспилер на основе Ruby. Может кто-нибудь объяснить, как:

установить libsass?
использовать его из командной строки?
используйте его с бегунами задач, такими как gulp и grunt?

У меня мало опыта работы с менеджерами пакетов и, тем более, с задачами.

Ответ 1

Я выбрал node -sass executer для 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

Примеры:

$ node-sass my-styles.scss my-styles.css скомпилирует один файл вручную.
$ node-sass my-sass-folder/ -o my-css-folder/ скомпилирует все файлы в папке вручную.
$ node-sass -w sass/ -o css/ автоматически скомпилирует все файлы в папке всякий раз, когда исходный файл (файлы) изменен. -w добавляет часы для изменений файла (ов).

Более полезные параметры, такие как "сжатие" @здесь. Командная строка хороша для быстрого решения, однако для автоматизации процесса сборки можно использовать диспетчеры задач, такие как Grunt.js или Gulp.js.

Вы также можете добавить приведенные выше примеры в сценарии npm. Чтобы правильно использовать сценарии npm в качестве альтернативы gulp, прочитайте эту всеобъемлющую статью @css-tricks.com, особенно прочитайте задачи группировки.

Если в каталоге проекта $ npm init нет файла package.json, он создаст его. Используйте его с -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 скомпилирует ваши файлы.

Как использовать с gulp

$ npm install -g gulp устанавливает Gulp глобально.
Если в каталоге проекта $ npm init нет файла package.json, он создаст его. Используйте его с -y, чтобы пропустить вопросы.
$ npm install --save-dev gulp локально устанавливается Gulp. --save-dev добавляет gulp в devDependencies в package.json.
$ npm install gulp-sass --save-dev устанавливает gulp -sass локально.
Настройка Gulp для вашего проекта, создав файл 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.

Ответ 2

Установка этих инструментов может различаться для разных ОС.

В Windows, node -sass в настоящее время поддерживает VS2015 по умолчанию, если у вас есть только VS2013 и встретить любую ошибку во время выполнения команды, вы можете определить версию VS, добавив: --msvs_version = 2013. Это отмечено на странице node -sass npm.

Итак, безопасная командная строка, работающая в Windows с VS2013, такова: npm install --msvs_version = 2013 gulp node -sass gulp -sass

Ответ 3

В Windows 10 с использованием node v6.11.2 и npm v3.10.10, чтобы выполнить непосредственно в любой папке:

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

Я выполнял только инструкции в node -sass Github:

Добавьте node -gyp предварительные условия, запустив Admin в Powershell (требуется некоторое время):
```
> npm install --global --production windows-build-tools
```
В командной строке стандартной командной строки (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 теперь существует.
Проверьте, содержит ли ваша переменная окружения локальная учетная запись (не система) PATH:
```
%userprofile%\AppData\Roaming\npm
```
Если этого пути нет, npm и node могут все еще выполняться, но файлы bin bin не будут!

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

Примечание:

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