Como compilar ou converter sass / scss para css com node-sass (sem Ruby)?

Eu estava lutando para configurar o libsass, pois não era tão simples quanto o transpiler baseado em Ruby. Alguém poderia explicar como:

1. instalar libsass?
2. usar na linha de comando?
3. usá-lo com corredores de tarefas como gulp e grunt?

Tenho pouca experiência com gerenciadores de pacotes e menos ainda com executores de tarefas.

Eu escolhi o implementador node-sass para libsass porque ele é baseado em node.js.

Instalando node-sass

• (Pré-requisito) Se você não tiver o npm, instale o Node.js primeiro.
• $ npm install -g node-sassinstala o node-sass globalmente -g.

Esperamos que isso instale tudo que você precisa, se não for ler libsass na parte inferior.

Como usar node-sass em scripts de linha de comando e npm

Formato geral:

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

Exemplos:

1. $ node-sass my-styles.scss my-styles.css compila um único arquivo manualmente.
2. $ node-sass my-sass-folder/ -o my-css-folder/ compila todos os arquivos em uma pasta manualmente.
3. $ node-sass -w sass/ -o css/compila todos os arquivos em uma pasta automaticamente sempre que os arquivos de origem são modificados. -wadiciona uma observação para mudanças no (s) arquivo (s).

Mais opções úteis como 'compressão' @ aqui . A linha de comando é boa para uma solução rápida, no entanto, você pode usar executores de tarefas como Grunt.js ou Gulp.js para automatizar o processo de construção.

Você também pode adicionar os exemplos acima aos scripts npm. Para usar corretamente os scripts npm como alternativa ao gulp, leia este artigo abrangente @ css-tricks.com, especialmente sobre tarefas de agrupamento .

• Se não houver nenhum package.jsonarquivo no diretório do projeto, a execução $ npm initcriará um. Use-o com -ypara pular as perguntas.
• Adicionar "sass": "node-sass -w sass/ -o css/"a scriptsno package.jsonarquivo. Deve ser parecido com isto:

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

• $ npm run sass irá compilar seus arquivos.

Como usar com gole

• $ npm install -g gulp instala o Gulp globalmente.
• Se não houver nenhum package.jsonarquivo no diretório do projeto, a execução $ npm initcriará um. Use-o com -ypara pular as perguntas.
• $ npm install --save-dev gulpinstala o Gulp localmente. --save-devadiciona gulpa devDependenciesem package.json.
• $ npm install gulp-sass --save-dev instala o gulp-sass localmente.
• Configure o gulp para seu projeto criando um gulpfile.jsarquivo na pasta raiz do projeto com este conteúdo:

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

Um exemplo básico para transpilar

Adicione este código ao seu 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 sassexecuta a tarefa acima que compila o (s) arquivo (s) .scss na sasspasta e gera os arquivos .css na csspasta.

Para facilitar a vida, vamos adicionar um relógio para que não tenhamos que compilá-lo manualmente. Adicione este código ao seu gulpfile.js:

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

Tudo está pronto agora! Basta executar a tarefa de observação:

$ gulp sass:watch

Como usar com Node.js

Como o nome de node-sass indica, você pode escrever seus próprios scripts node.js para transpilar. Se você estiver curioso, verifique a página do projeto node-sass.

E quanto ao libsass?

Libsass é uma biblioteca que precisa ser construída por um implementador como o sassC ou em nosso caso, node-sass. O Node-sass contém uma versão compilada do libsass que usa por padrão. Se o arquivo de construção não funcionar em sua máquina, ele tentará construir o libsass para sua máquina. Este processo requer Python 2.7.x (3.x não funciona a partir de hoje). Além do que, além do mais:

LibSass requer GCC 4.6+ ou Clang / LLVM. Se o seu sistema operacional for mais antigo, esta versão pode não ser compilada. No Windows, você precisa do MinGW com GCC 4.6+ ou VS 2013 Update 4+. Também é possível construir LibSass com Clang / LLVM no Windows.

A instalação dessas ferramentas pode variar em diferentes sistemas operacionais.

No Windows, o node-sass atualmente suporta VS2015 por padrão, se você tiver apenas VS2013 em sua caixa e encontrar algum erro ao executar o comando, você pode definir a versão do VS adicionando: --msvs_version = 2013. Isso é observado na página NPM do node-sass .

Portanto, a linha de comando segura que funciona no Windows com VS2013 é: npm install --msvs_version = 2013 gulp node-sass gulp-sass

No Windows 10 usando node v6.11.2 e npm v3.10.10 , para executar diretamente em qualquer pasta:

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

Eu apenas segui as instruções no node-sass Github :

1. Adicione os pré-requisitos do node-gyp executando como Admin em um Powershell (leva um tempo):

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

2. Em um shell de linha de comando normal ( Win+ R+ cmd + Enter) execute:

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

   Os -glocais desses pacotes %userprofile%\AppData\Roaming\npm\node_modules. Você pode verificar se npm\node_modules\node-sass\bin\node-sassagora existe.

3. Verifique se a variável de ambiente da sua conta local (não o sistema) PATH contém:

   %userprofile%\AppData\Roaming\npm
   

   Se este caminho não estiver presente, npm e node ainda podem ser executados, mas os arquivos bin dos módulos não!

Feche o shell anterior e reabra um novo e execute > node-gypou > node-sass.

Nota:

• O windows-build-tools pode não ser necessário (se nenhuma compilação for feita? Eu gostaria de ler se alguém fez isso sem instalar essas ferramentas), mas ele adicionou à conta de administrador a GYP_MSVS_VERSIONvariável de ambiente com 2015um valor.
• Também posso executar diretamente outros módulos com arquivos bin , como > uglifyjs main.js main.min.jse> mocha