我使用gulp-compass和gulp-postcss。我找不到用gulp找到css文件和依赖文件公用文件夹（如webroot / css）的最佳方法。我在下面显示了部分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')));
});
它适用于material-icons.css，但此输出不包括依赖于（例如：MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons-Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons- Regular.woff2）。我希望这些资产使用gulp找到公用文件夹。尽管足够了，但如果可能的话，最好将这些文件和带有gulp-compass的已编译css文件捆绑到css文件中。
你有什么主意吗？
因此，必须将字体从Bower依赖项复制到build文件夹（如果使用其他管理字体的任务，则复制到src文件夹）。最好的方法是使gulp任务复制字体（如果更新依赖项，则可以运行font task并将复制更新的文件）。然后，您可以使用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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句