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

93

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.

Thoran
fonte

Respostas:

228

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.

Thoran
fonte
1
@PublicHandle Talvez seja esse o motivo, não me lembro. node-sassestá nas gulp-sassdependências de , portanto, não há necessidade de instalá-lo localmente.
Thoran
1
A instalação global do @PublicHandle do gulp é necessária se você deseja executar as tarefas do gulp na linha de comando.
Thoran
1
@Thoran Ah, isso faz sentido se node-sass é uma dependência do gulp-sass, então não é necessário localmente, enquanto o gulp em si é necessário em ambos os lugares para que possa ser executado na linha de comando e incluído como uma dependência no projeto. Obrigado mais uma vez, excelente artigo!
PublicHandle
1
@Thoran Eu estava tentando descobrir se posso evitar o uso de um executor de tarefas como gulp ou grunt e escrever um script npm simples que faz o que preciso. Eu olhei em node-sass, a linha de comando obviamente usa glob e faz loops sobre os arquivos. Acho que é melhor simplesmente copiar esse código.
Bernhard Döbler
1
Portanto, para evitar o uso de Ruby , pode-se usar node.js , uma versão específica de Python E uma biblioteca C ++ que precisa ser compilada se estiver usando Windows? Isso simplifica muito as coisas.
toniedzwiedz
5

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

Brian Ng
fonte
3

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
Pé de braço
fonte