1

Estoy utilizando gulp-ruby-sass en lugar de gulp-sass para la pre-compilación del código en scss de mi proyecto. Resulta que aún teniendo prefijos en mi archivo .scss y siguiendo la forma en que se declaran los mixins

como por ejemplo:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Debería producir en el CSS algo como:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Pero solo obtengo:

.box {
  border-radius: 10px;
}

Sin los prefijos.

¿A alguien más le ocurre? ¿Será que simplemente gulp-ruby-sass no compila con los prefijos?

De ésta manera tengo las tasks de gulp:

var gulp = require("gulp");
// Requires the gulp-sass plugin
var sass = require("gulp-ruby-sass");
// Requires browser-sync package for automatic browser refresh
var browserSync = require("browser-sync").create();

// Static Server + watching scss/html files
gulp.task("serve", ["sass"], function(){

  browserSync.init({
    server: "./src"
  });
  /**
  * Listens changes for all .scss files
  */
  gulp.watch("src/scss/*.scss", ["sass"]);
  /**
  * Listens changes for all .html files
  */
  gulp.watch("src/*.html").on("change", browserSync.reload);
  gulp.watch("src/en/*.html").on("change", browserSync.reload);
});

/**
 * Compile with gulp-ruby-sass
 */

gulp.task("sass", function () {
  return sass("src/scss/style.scss")
    .on("error", sass.logError)
    // Writes converted css to dest url
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream({match: "src/*.css"}))
});
3
  • 1
    ¿En dónde viste los estilos resultantes, era el src/css/styles.css? En el navegador únicamente te debe aparecer el estilo correcto, en la mayoría de los navegadores debería ser solo border-radius que ya es un estándar.
    – learnercys
    Commented el 6 ene. 2016 a las 1:07
  • Lo vi en el archivo generado, es decir: src/css/style.css
    – roadev
    Commented el 6 ene. 2016 a las 1:11
  • 1
    Que extraño, ejecuté el task gulp sass y si me muestra bien los resultados: jsfiddle.net/learnercys/ptuo75a9 . El css resultante lo puse en un comentario del scss :)
    – learnercys
    Commented el 6 ene. 2016 a las 1:23

1 respuesta 1

4

Acabo de correr la task gulp-sass, no gulp-serve como lo venía haciendo y pude ver en el error log que había un conflicto con la gema sass (error que no me salía en el log cuando corría gulp-serve, el cuál también utilizaba la task de sass)

Raro porque yo había instalado la gema desde el Gemfile anteriormente, así que volví a hacer un bundle install y volví a correr gulp-sass. Finalizó sin errores.

Al revisar, ya salen los prefijos.

Intenté con gulp-serve y ya funciona correctamente todo el proceso.

Si a alguien más le pasa, asegúrense de tener correctamente instalada la gema sass en su proyecto

2
  • Si ya encontraste la solución marca tu respuesta como aceptada Commented el 6 ene. 2016 a las 4:36
  • Me sale que debo esperar 2 días para hacerlo...
    – roadev
    Commented el 6 ene. 2016 a las 4:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.