-1

estoy intentando que compilen los archivos sass en un archivo principal que contiene todos los @import pero no logro hacer que funcione. Mi código es:

gulpfile.js:

//Cargar módulos
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    notify = require("gulp-notify"),
    browserSync = require('browser-sync').create(),
    browserSync = require('browser-sync'),
    sass = require('gulp-sass'),
    //sassImport    = require('gulp-sass-import'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    imagemin = require('gulp-imagemin'),
    connect = require('gulp-connect-php');

//browsersync sass
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        proxy: "localhost"
    });
});

//browsersync php
gulp.task('connect', function() {
    connect.server({}, function() {
        browserSync({
            proxy: 'localhost'
        });
    });
});

//estilos css
gulp.task('sass', function(done) {
    return gulp.src('./src/scss/*.scss')
        .pipe(sourcemaps.init())
        /*.pipe(sassImport({
            filename : '_file',
            marker : '/*'
        }))*/
        .pipe(sass.sync()).on('error', notify.onError(function(error) {
            return 'Error al compilar sass.\n Detalles en la consola.\n' +
                error;
        }))
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(autoprefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest("./dist/css/"))
        .pipe(notify({
            title: "SASS",
            message: "OK: Archivo compilado"
        }))
        .pipe(browserSync.stream());
});

//Procesar scripts
gulp.task('scripts', function() {
    return gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
});

//Minificar imágenes
gulp.task('image', function() {
    return gulp.src('./src/images/**/*')
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            optimizationLevel: 5,
            svgoPlugins: [{
                removeViewBox: true
            }]
        }))
        .pipe(gulp.dest('./dist/images/'));
});

//Tarea por default
gulp.task('watch', function() {
    gulp.watch('./src/scss/*.scss', ['sass']); //Vigila cambios en los
    estilos
    gulp.watch("./*.php").on("change", browserSync.reload);
    gulp.watch('./src/js/*.js', ['scripts']);
    gulp.watch('./src/images/**/*', ['image']);
    //gulp.watch('**/*.php').on('change', function () {
    //   browserSync.reload();
    //});
});

//Default task
gulp.task('default', ['serve', 'sass', 'scripts', 'image', 'connect',
    'watch'
]);

main.scss(el que importa los archivos sass):

    // BASE
    @import 'base/_reset.scss';
@import 'base/_typography.scss';

//VENDORS (librerías externas)
@import 'vendors/_fontawesome.scss';

//UTILIDADES (variables, funciones, mixins,...)
@import 'utils/_variables.scss';
@import 'utils/_functions.scss';
@import 'utils/_mixins.scss';
//@import 'utils/_helpers.scss';

//COMPONENTES (botones, tablas, carrusel,..)
@import 'components/_buttons.scss';
//@import 'components/_dropdown.scss';
//@import 'components/_tables.scss';

//LAYOUT (elementos estructurales)
@import 'layout/_header.scss';
@import 'layout/_footer.scss';
//@import 'layout/_navigation.scss';
//@import 'layout/_sidebar.scss';
@import 'layout/_forms.scss';
@import 'layout/_grid.scss';

//PAGES (estilos específicos para algunas páginas: home, contacto,...)
//@import 'pages/_home.scss';
//@import 'pages/_contact.scss';

//TEMAS (si se utilizan... por defecto, administrador,..)
//@import 'themes/_theme.scss';
//@import 'themes/_admin.scss';
1
  • ¿Recibes algún error? ¿Cómo no funciona?
    – Alvaro Montoro
    Commented el 8 nov. 2018 a las 18:55

1 respuesta 1

-1

Nada, ya está arreglado. Era la ruta de los archivos css en el gulpfile.js que apuntaba al archivo que importa, main.scss, en vez de al resto de archivos.

2
  • Esto es acorde a un comentario, en vez de a una respuesta. Saludos.
    – DevMind
    Commented el 12 nov. 2018 a las 15:15
  • Muchas gracias, lo tendré en cuenta
    – paulpik
    Commented el 19 dic. 2018 a las 15:54

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.