Могу ли я расслоить sass и css под bower_components с использованием gulp

Question

Я использую gulp-compass и gulp-postcss. Я не мог найти лучший способ найти файлы css и общую папку с файлами зависимостей, например webroot/css, с помощью gulp. Я показываю частичный gulpfile.js ниже.

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'))); 
    }); 

Он работает около материалоемкости icons.css, но этот вывод не включает в себя файлы, которые зависели (например: MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons-Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons-Regular.woff2). Я хочу, чтобы эти активы находили общую папку с gulp. Хотя этого достаточно, лучше эти файлы и скомпилированный файл css с gulp-compass поставляются в css-файл, если это возможно.

У вас есть идея?

Answer 1

Так что вам нужно скопировать шрифты из зависимостей бауэра в вашу папку сборки (или в вашу папку src, если вы используете какую-то другую задачу для управления шрифтами). Лучший способ - сделать задачу gulp, которая скопирует шрифты (в случае, если вы обновите зависимости, вы можете запустить задачу шрифта и скопировать обновленные файлы). Затем вы можете использовать SASS для добавления шрифтов:

// 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'); 

И CSS вы можете включить в основной файл SCSS, например, в main.scss:

@import './bower_components/material-design-icons/iconfont/material-icons.css'; 

Вы можете прочитать здесь http://google.github.io/material-design-icons/