¿Cómo compilar o convertir sass / scss a css con node-sass (sin Ruby)?

91

Estaba luchando con la configuración de libsass ya que no era tan sencillo como el transpilador basado en Ruby. ¿Alguien podría explicar cómo:

  1. instalar libsass?
  2. usarlo desde la línea de comando?
  3. usarlo con corredores de tareas como gulp y gruñido?

Tengo poca experiencia con administradores de paquetes y menos aún con corredores de tareas.

css sass gulp-sass node-sass libsass Thoran
fuente

Respuestas:

226

Elegí el implementador de node-sass para libsass porque se basa en node.js.

Instalación de node-sass

  • (Requisito) Si no tiene npm, primero instale Node.js.
  • $ npm install -g node-sassinstala node-sass a nivel mundial -g.

Con suerte, esto instalará todo lo que necesita, si no lee libsass en la parte inferior.

Cómo usar node-sass desde la línea de comandos y scripts npm

Formato general:

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

Ejemplos:

  1. $ node-sass my-styles.scss my-styles.css compila un solo archivo manualmente.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ compila todos los archivos en una carpeta manualmente.
  3. $ node-sass -w sass/ -o css/compila todos los archivos de una carpeta automáticamente cada vez que se modifican los archivos de origen. -wagrega un reloj de cambios en los archivos.

Más opciones útiles como 'compresión' @ aquí . La línea de comando es buena para una solución rápida, sin embargo, puede usar corredores de tareas como Grunt.js o Gulp.js para automatizar el proceso de compilación.

También puede agregar los ejemplos anteriores a los scripts npm. Para utilizar correctamente los scripts npm como alternativa a gulp, lea este artículo completo @ css-tricks.com, especialmente sobre tareas de agrupación .

  • Si no hay ningún package.jsonarchivo en el directorio de su proyecto, $ npm initse creará uno. Úselo con -ypara omitir las preguntas.
  • Agregar "sass": "node-sass -w sass/ -o css/"ascripts en el package.jsonarchivo. Debería verse algo como esto:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass compilará sus archivos.

Cómo usar con gulp

  • $ npm install -g gulp instala Gulp a nivel mundial.
  • Si no hay package.json archivo en el directorio de su proyecto, $ npm initse creará uno. Úselo con -ypara omitir las preguntas.
  • $ npm install --save-dev gulpinstala Gulp localmente. --save-devse suma gulpadevDependencies en package.json.
  • $ npm install gulp-sass --save-dev instala gulp-sass localmente.
  • Configure gulp para su proyecto creando un gulpfile.jsarchivo en la carpeta raíz de su proyecto con este contenido:
'use strict';
var gulp = require('gulp');

Un ejemplo básico para transpilar

Agregue este código a su 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 sassejecuta la tarea anterior que compila archivo (s) .scss en la sasscarpeta y genera archivo (s) .css en elcss carpeta.

Para hacer la vida más fácil, agreguemos un reloj para que no tengamos que compilarlo manualmente. Agregue este código a su gulpfile.js:

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

¡Todo está listo ahora! Simplemente ejecute la tarea de vigilancia:

$ gulp sass:watch

Cómo usar con Node.js

Como implica el nombre de node-sass, puede escribir sus propios scripts de node.js para transpilar. Si tiene curiosidad, consulte la página del proyecto node-sass.

¿Qué pasa con libsass?

Libsass es una biblioteca que debe ser construida por un implementador como sassC o en nuestro caso node-sass. Node-sass contiene una versión construida de libsass que utiliza de forma predeterminada. Si el archivo de compilación no funciona en su máquina, intenta compilar libsass para su máquina. Este proceso requiere Python 2.7.x (3.x no funciona a partir de hoy). Adicionalmente:

LibSass requiere GCC 4.6+ o Clang / LLVM. Si su sistema operativo es más antiguo, es posible que esta versión no se compile. En Windows, necesita MinGW con GCC 4.6+ o VS 2013 Update 4+. También es posible construir LibSass con Clang / LLVM en Windows.

Thoran
fuente
1
@PublicHandle Quizás esa fue la razón, no lo recuerdo. node-sassestá en gulp-sasslas dependencias de , por lo que no es necesario instalarlo localmente.
Thoran
1
La instalación global de @PublicHandle de gulp es necesaria si desea ejecutar tareas de gulp desde la línea de comandos.
Thoran
1
@Thoran Ah, eso tiene sentido, entonces, si node-sass es una dependencia de gulp-sass, por lo que no se necesita localmente, mientras que gulp sí es necesario en ambos lugares para que pueda ejecutarse en la línea de comando e incluirse como una dependencia en el proyecto. ¡Gracias de nuevo, excelente artículo!
PublicHandle
1
@Thoran Estaba tratando de averiguar si puedo evitar usar un corredor de tareas como gulp o grunt y escribir un script npm simple que haga lo que necesito. Miré en node-sass, la línea de comando obviamente usa glob y recorre los archivos. Supongo que es mejor simplemente copiar ese código.
Bernhard Döbler
1
Entonces, para evitar usar Ruby , se puede usar node.js , una versión específica de Python Y una biblioteca C ++ que se necesita compilar si se usa Windows. Eso simplifica mucho las cosas.
toniedzwiedz
5

La instalación de estas herramientas puede variar según el sistema operativo.

En Windows, node-sass actualmente admite VS2015 de forma predeterminada, si solo tiene VS2013 en su caja y encuentra algún error mientras ejecuta el comando, puede definir la versión de VS agregando: --msvs_version = 2013. Esto se indica en la página npm de node-sass .

Entonces, la línea de comando segura que funciona en Windows con VS2013 es: npm install --msvs_version = 2013 gulp node-sass gulp-sass

Brian Ng
fuente
3

En Windows 10 usando el nodo v6.11.2 y npm v3.10.10 , para ejecutar directamente en cualquier carpeta:

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

Solo seguí las instrucciones en node-sass Github :

  1. Agregue los requisitos previos de node-gyp ejecutándose como administrador en un Powershell (lleva un tiempo):

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

  2. En un shell de línea de comandos normal ( Win+ R+ cmd + Enter) ejecute:

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

    Los -glugares debajo de estos paquetes %userprofile%\AppData\Roaming\npm\node_modules. Puede comprobar que npm\node_modules\node-sass\bin\node-sassahora existe.

  3. Compruebe si la variable de entorno de su cuenta local (no el Sistema) PATH contiene:

    %userprofile%\AppData\Roaming\npm

    Si esta ruta no está presente, npm y node aún pueden ejecutarse, ¡pero los archivos bin de los módulos no lo harán!

Cierre el shell anterior y vuelva a abrir uno nuevo y ejecute > node-gypo > node-sass.

Nota:

  • El windows-build-tools puede no ser necesario (si no hay compilación se realiza? Me gustaría leer si alguien lo hizo sin necesidad de instalar estas herramientas), pero sí añadir a la cuenta de administrador de la GYP_MSVS_VERSIONvariable de entorno con 2015un valor.
  • También puedo ejecutar directamente otros módulos con archivos bin , como > uglifyjs main.js main.min.jsy> mocha
Armfoot
fuente