include bower_components css

[adskiremote]

Hi,

is it possible to modify the gulpfile to include css from bower_components - in bower.json?

Many thanks

[tmaximini]

sorry for the delayed response. yes, definitely possible. maybe you want to implement it and make a pull request? basically, we can use wiredep for this. I am using it already for the js files: https://github.com/tmaximini/generator-ionic-gulp/blob/master/app/templates/_gulpfile.js#L189-L192

you might want to add a third stream of css here and add it to the css streamqueue. https://github.com/tmaximini/generator-ionic-gulp/blob/master/app/templates/_gulpfile.js#L71-L96

[EmreErdogan]

Hello,

As suggested by @tmaximini I did a small piece of modification in styles task. Here is the code:

gulp.task('styles', function() {

  var options = build ? { style: 'compressed' } : { style: 'expanded' };

  var sassStream = gulp.src('app/styles/main.scss')
    .pipe(plugins.sass(options))
    .on('error', function(err) {
      console.log('err: ', err);
      beep();
    });

  // build ionic css dynamically to support custom themes
  var ionicStream = gulp.src('app/styles/ionic-styles.scss')
    .pipe(plugins.cached('ionic-styles'))
    .pipe(plugins.sass(options))
    // cache and remember ionic .scss in order to cut down re-compile time
    .pipe(plugins.remember('ionic-styles'))
    .on('error', function(err) {
        console.log('err: ', err);
        beep();
      });

  var vendorFiles = wiredep().css;
  var bowerStream = gulp.src(vendorFiles);

  return streamqueue({ objectMode: true }, ionicStream, sassStream, bowerStream)
    .pipe(plugins.autoprefixer('last 1 Chrome version', 'last 3 iOS versions', 'last 3 Android versions'))
    .pipe(plugins.concat('main.css'))
    .pipe(plugins.if(build, plugins.stripCssComments()))
    .pipe(plugins.if(build && !emulate, plugins.rev()))
    .pipe(gulp.dest(path.join(targetDir, 'styles')))
    .on('error', errorHandler);
});

After running gulp command in the command line it seems that css files from bower components are concatenated to the end of the generated main.css file. I think it works. Can you please tell if this modification is correct?

[tmaximini]

Hi @EmreErdogan It looks good from what I can see!