Complemento de Sass para gulp

Complemento de Sass para Gulp .

Antes de presentar un problema, asegúrese de haber actualizado a la última versióngulp-sass y de haber revisado nuestra sección Problemas comunes y sus soluciones .

¿Está migrando su proyecto existente a la versión 5? Lea nuestra (¡breve!) Guía de migración .

Apoyo

Solo se admiten las versiones Active LTS y Current .

Instalación

Para usarlo gulp-sass, debe instalarse tanto a gulp-sasssí mismo como a un compilador de Sass. gulp-sassadmite Dart Sass y Node Sass , aunque Node Sass está obsoleto . Le recomendamos que utilice Dart Sass para nuevos proyectos y migre los proyectos de Node Sass a Dart Sass cuando sea posible.

Cualquiera que sea el compilador que elija, es mejor instalarlos como dependencias de desarrollo:

npm install sass gulp-sass --save-dev

Importándolo a su proyecto

gulp-sassdebe importarse a su archivo gulp, donde le proporciona el compilador de su elección. Para usar gulp-sassen un módulo CommonJS (que es la mayoría de los entornos Node.js), haga algo como esto:

const  sass  =  require ( 'gulp-sass' ) ( require ( 'sass' ) ) ;

Para usar gulp-sassen un módulo ECMAScript (que es compatible con Node.js 14 y posteriores), haga algo como esto:

import dartSass from 'sass';

import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass)

Uso

Nota: Estos ejemplos están escritos para módulos CommonJS y se asume que está usando Gulp 4. Para ver ejemplos que funcionan con Gulp 3, consulte los documentos para obtener una versión anterior degulp-sass .

gulp-sassdebe usarse en una tarea de Gulp. Su tarea puede llamar sass()(para representar asincrónicamente su CSS), o sass.sync()(para representar sincrónicamente su CSS). Luego, exporte su tarea con la exportpalabra clave. Mostraremos algunos ejemplos de cómo hacerlo.

⚠️Nota: Cuando se usa Dart Sass, el renderizado sincrónico es dos veces más rápido que el renderizado asincrónico . El equipo de Sass está explorando formas de mejorar el renderizado asincrónico con Dart Sass, pero por ahora, obtendrá el mejor rendimiento sass.sync(). Si el rendimiento es crítico, puede usarlo node-sassen su lugar, pero tenga en cuenta que es node-sassposible que no sea compatible con las funciones modernas de Sass en las que confía.

Renderiza tu CSS

Para renderizar su CSS con una tarea de compilación, luego observe sus archivos en busca de cambios, puede escribir algo como esto:

'uso estricto' ;

const gulp = require('gulp');

const sass = require('gulp-sass')(require('sass'));

function buildStyles() {

  return gulp.src('./sass/**/*.scss')

    .pipe(sass().on('error', sass.logError))

    .pipe(gulp.dest('./css'));

};

exports.buildStyles = buildStyles;

exports.watch = function () {

  gulp.watch('./sass/**/*.scss', ['sass']);

};

Con el renderizado síncrono, esa tarea de Gulp se ve así:

function buildStyles() {

  return gulp.src('./sass/**/*.scss')

    .pipe(sass.sync().on('error', sass.logError))

    .pipe(gulp.dest('./css'));

};

Renderizar con opciones

Para cambiar la salida final de su CSS, puede pasar un objeto de opciones a su renderizador. gulp-sassadmite las opciones de renderizado de Node Sass , con dos excepciones no admitidas:

• La dataopción, que es utilizada gulp-sassinternamente.
• La fileopción, que tiene un comportamiento indefinido que puede cambiar sin previo aviso.

Por ejemplo, para comprimir su CSS, puede llamar sass({outputStyle: 'compressed'}. En el contexto de una tarea de Gulp, se ve así:

function buildStyles() {

  return gulp.src('./sass/**/*.scss')

    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

...