Can I bundle sass and css under bower_components with using gulp - css

Question

I use gulp-compass and gulp-postcss.
I couldn't find best way to locate css files and the dependencies files public folder like webroot/css with gulp. I show partial gulpfile.js bellow.
var postcss = require('gulp-postcss');
var cssnano = require('cssnano');
var atImport = require('postcss-import');
var vendorCssPath =
[
path.join(app_root,'/bower_components/material-design-icons/iconfont/material-icons.css')
];
gulp.task('css', function () {
var processors = [
atImport(),
cssnano()
];
return gulp.src(vendorCssPath)
.pipe(cache('css'))
.pipe(postcss(processors))
.pipe(gulp.dest(path.join(projectDir,'/css')));
});
It works about material-icons.css, but this output doesn't include files which depended on (ex:MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons-Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons-Regular.woff2).
I want these assets locate public folder with gulp.Though it is enough, better these files and compiled css file with gulp-compass are bundled to css file if it is possible.
Do you have any idea?

Answer 1

So the thing is that you have to copy fonts from bower dependencies to your build folder (or to your src folder if you use some other task for managing fonts). The best way is to make gulp task which will copy fonts (in case you update dependencies you can run font task and it will copy updated files).
Then you can use SASS for adding fonts:
// FONTS
// ---------------------------------------------------
#mixin font-face($fontFamily, $src, $fontName){
#font-face {
font-family: $fontFamily;
src: url("#{$src}#{$fontName}.eot");
src: url("#{$src}#{$fontName}.eot?#iefix") format("embedded-opentype"),
url("#{$src}#{$fontName}.woff") format("woff"),
url("#{$src}#{$fontName}.ttf") format("truetype"),
url("#{$src}#{$fontName}.svg##{$fontFamily}") format("svg");
}
}
#include font-face('Material Icons', '/assets/build/fonts/MaterialIcons/', 'MaterialIcons-Regular');
And CSS you can include in your main SCSS file, for example in main.scss:
#import './bower_components/material-design-icons/iconfont/material-icons.css';
You can read more here http://google.github.io/material-design-icons/