我可以在bower_components下使用gulp捆绑sass和css吗？
我可以在bower_components下使用gulp捆绑sass和css吗？
提问于 2017-01-16 17:00:19
我用gulp-compass和gulp postcss。我找不到最好的方法来定位css文件和依赖文件公共文件夹，比如webroot/css with 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')));
});它适用于material-icons.css，但此输出不包括依赖于(例如:MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons-Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons-Regular.woff2)的文件。我希望这些资产位于公用文件夹与gulp.Though它是足够的，最好是这些文件和编译的css文件与gulp指南针捆绑到css文件，如果可能的话。
你有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-16 18:14:20
因此，问题是您必须将字体从bower依赖项复制到build文件夹(如果您使用其他任务管理字体，则复制到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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41672631
复制相关文章
相似问题
腾讯云开发者
