N
N
Nikolai2018-03-11 05:14:14
css
Nikolai, 2018-03-11 05:14:14

PostCss plugin postcss-easy-import does not import styles. Why?

Styles not importing

var 	        gulp          = require('gulp'),
    gutil         = require('gulp-util' ),
    pug        	  = require('gulp-pug'),
    postcss 	  = require('gulp-postcss'),
    assets  	  = require('postcss-assets'),
    cssnext		  = require('postcss-cssnext'),
      sourcemaps 	  = require('gulp-sourcemaps'),
      reporter 	  = require('postcss-browser-reporter'),
      importcss 	  = require('postcss-easy-import'),
      rucksack 	  = require('rucksack-css'),
      lost 		  = require('lost'),
      stylelint	  = require('stylelint'),
      config		  = require('./stylelint.config.js'),
      plumber 	  = require('gulp-plumber'),
      browsersync   = require('browser-sync'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify'),
    rename        = require('gulp-rename'),
    notify        = require("gulp-notify"),
    rsync         = require('gulp-rsync');

gulp.task('browser-sync', function() {
  browsersync({
    server: {
      baseDir: 'app'
    },
    notify: false,
    // open: false,
    // tunnel: true,
    // tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
  })
});

var paths = {
      pugSourse: 'dev/',
      pugDestination: 'app/',
      cssSource: 'dev/',
  			cssDestination: 'app/css/'
    };

gulp.task('pug', function buildHTML() {
  return gulp.src(paths.pugSourse + '*.pug')
  .pipe(plumber({
    errorHandler: notify.onError(function(err){
      return {
        title: 'Pug',
        message: err.message
      }
    })
  }))
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest(paths.pugDestination))
  .pipe(browsersync.reload( {stream: true} ))
});

gulp.task('css', function() {
  return gulp.src(paths.cssSource + '*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
      importcss(),
      cssnext(),
      rucksack(),
      assets({ loadPaths: ['app/img/bg/']}),
      lost(),
      stylelint(config),
      reporter()
    ]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.cssDestination));
});

gulp.task('js', function() {
  return gulp.src([
    'app/libs/jquery/dist/jquery.min.js',
    'app/js/common.js', // Always at the end
    ])
  .pipe(concat('scripts.min.js'))
  // .pipe(uglify()) // Mifify js (opt.)
  .pipe(gulp.dest('app/js'))
  .pipe(browsersync.reload({ stream: true }))
});

gulp.task('rsync', function() {
  return gulp.src('app/**')
  .pipe(rsync({
    root: 'app/',
    hostname: '[email protected]',
    destination: 'yousite/public_html/',
    // include: ['*.htaccess'], // Includes files to deploy
    exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
    recursive: true,
    archive: true,
    silent: false,
    compress: true
  }))
});

gulp.task('watch', ['pug', 'css', 'js', 'browser-sync'], function() {
  gulp.watch(paths.pugSourse + '**/*.pug', ['pug']);
  gulp.watch(paths.pugSourse + '**/*.css', ['css']);
  gulp.watch('app/*.html', browsersync.reload)
});

gulp.task('default', ['watch']);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question