css3 - Gulp @import Ошибка


1

Пытаюсь в scss файл импортировать css файл:

@import app/libs/fonts;

В Gulp выдает предупреждения :

DEPRECATION WARNING on line 1, column 8 of /libsass/test.scss:
Including .css files with @import is non-standard behaviour which will be 
removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations 
documentation on how to create a custom importer.

В итоге стили не не рабоатют! Gulp config:

var gulp = require(gulp),
sass = require(gulp-sass),
browserSync = require(browser-sync),
concat = require(gulp-concat),
uglify = require(gulp-uglifyjs),
cssnano = require(gulp-cssnano),
rename = require(gulp-rename),
del = require(del),
imagemin = require(gulp-imagemin),
pngquant = require(imagemin-pngquant),
cache = require(gulp-cache),
autoprefixer = require(gulp-autoprefixer);

gulp.task(sass, function(){ 
return gulp.src(app/sass/**/*.+(sass|scss)) 
    .pipe(sass({ 
        includePaths: [ 
                app/libs/foundation-sites/scss 
                      ] 
               })) 
    .pipe(autoprefixer([last 15 versions, > 1%, ie 8, ie 7], { cascade: true })) 
    .pipe(gulp.dest(app/css)) 
    .pipe(browserSync.reload({stream: true})) 
     });
     gulp.task(browser-sync, function() { 
    browserSync({ 
    server: { 
        baseDir: app 
    },
    notify: false 
   });
 });

 gulp.task(scripts, function() {
return gulp.src([ 
    app/libs/jquery/dist/jquery.min.js,
    app/libs/fontawesome/svg-with-js/js/fontawesome-all.min.js
    //app/libs/foundation-sites/dist/js/foundation.min.js
    ])
    .pipe(concat(libs.min.js)) 
    .pipe(uglify()) 
    .pipe(gulp.dest(app/js)); 
  });

 gulp.task(css-libs, [sass], function() {
  return gulp.src(app/css/libs.css)
    .pipe(cssnano())
    .pipe(rename({suffix: .min}))
    .pipe(gulp.dest(app/css));
   });

    gulp.task(img, function() {
    return gulp.src(app/img/**/*) 
    .pipe(cache(imagemin({  
        interlaced: true,
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    })))
    .pipe(gulp.dest(dist/img)); 
  });

  gulp.task(watch, [browser-sync, css-libs, scripts], function() {
gulp.watch(app/sass/**/*.+(sass|scss), [sass]); 
gulp.watch(app/*.html, browserSync.reload); 
gulp.watch(app/js/**/*.js, browserSync.reload);  
});

   gulp.task(clean, function() {
  return del.sync(dist);
  });

gulp.task(build, [clean, img, sass, scripts], function() {

var buildCss = gulp.src([ // Переносим библиотеки в продакшен
    app/css/main.css,
    app/css/libs.min.css
    ])
.pipe(gulp.dest(dist/css))

var buildFonts = gulp.src(app/fonts/**/*) // Переносим шрифты в продакшен
.pipe(gulp.dest(dist/fonts))

var buildJs = gulp.src(app/js/**/*) // Переносим скрипты в продакшен
.pipe(gulp.dest(dist/js))

var buildHtml = gulp.src(app/*.html) // Переносим HTML в продакшен
.pipe(gulp.dest(dist));

});
  gulp.task(clear, function (callback) {
  return cache.clearAll();
  })
Источник
  •  45
  •  2
  • 2 янв 2018 2018-01-02 08:48:38

2 ответа

3

Все куда проще, они более не поддерживают иморт css. Или конвертируйте css в scss, либо укажите уже к готовому файлу в библиотеке в формате scss. По крайней мере я перекачал библиотеки и подключил scss файлы.

Как вариант использование библиотеки gulp-cssimport

Update: Нашел решение для себя еще одно, при импорте нужно указать расширение файла .css

0

Ваш gulpfile.js у меня отрабатывает как положено но с путями к файлам правильными.

Исходя из вашего gulpfile.js, файл в котором находится строка @import app/libs/fonts; расположен в каталогe app/sass/ или вложенных в него каталогах и ваш файл.css находится в папке app/libs/fonts/, надо проверить:

  • Если sass файл расположен в каталогe app/sass/ тогда строка импорта должна быть такой:
    @import ../libs/fonts/файл.css;

  • Если sass файл расположен во вложенном каталогe app/sass/**/ тогда строка импорта должна быть такой:
    @import ../../libs/fonts/файл.css;

  • Если файл с импортом расположен по другому пути то исправляйте пути в этом месте:
    return gulp.src(app/sass/**/*.+(sass|scss))

Если после этого не заработало пробуйте проделать это:

  1. Удали из папки node_modules которая в проекте папку gulp-sass
  2. Удали строку gulp-sass из package.json
  3. Удали если есть node-sass из package.json
  4. Запусти установку npm install gulp-sass --save-dev

Думаю это должно помочь, но обязательно проверьте пути.