[英]Remote Import Fonts with Gulp
So I'm noticing that my current Gulp setup isn't importing remote fonts such as google fonts. 所以我注意到我目前的Gulp设置没有导入谷歌字体等远程字体。 In my
main.scss
file I have: 在我的
main.scss
文件中,我有:
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);
And when it compiles minified it looks something like this: 当它编译缩小时,它看起来像这样:
@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}
I'm using gulp-minify-css
which uses clean-css. 我正在使用
gulp-minify-css
,它使用clean-css。 I know there may be something you have to do to get remote imports to work correctly but reading the docs left me with more questions then answers. 我知道你可能需要做些什么来让远程导入正常工作,但阅读文档会给我留下更多问题然后回答。 Here is a section of my gulp file that handles the Sass/CSS minification:
这是我的gulp文件的一部分,用于处理Sass / CSS缩小:
// Minimize CSS
gulp.task('minify-css', function() {
return gulp.src('css/src/*.css')
.pipe(minifyCss({
compatibility: 'ie8',
aggressiveMerging: false
}))
.pipe(gulp.dest('css/'));
});
Any help would be appreciated! 任何帮助,将不胜感激! Thanks.
谢谢。
Your Problem is due to the lack of sass to import css files. 您的问题是由于缺少导入css文件的sass。 You need to copy the css file and rename it to a *.scss file.
您需要复制css文件并将其重命名为* .scss文件。 The scss file can be imported correctly.
可以正确导入scss文件。
You will need to install and require gulp-rename: https://www.npmjs.com/package/gulp-rename 您需要安装并要求gulp-rename: https : //www.npmjs.com/package/gulp-rename
In the case of your example you could also consider to user gulp-google-webfonts: https://www.npmjs.com/package/gulp-google-webfonts 对于您的示例,您还可以考虑使用gulp-google-webfonts: https ://www.npmjs.com/package/gulp-google-webfonts
fonts.list: fonts.list:
Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic
gulpfile.js: gulpfile.js:
var gulp = require('gulp');
var googleWebFonts = require('gulp-google-webfonts');
var options = { };
gulp.task('fonts', function () {
return gulp.src('./fonts.list')
.pipe(googleWebFonts(options))
.pipe(gulp.dest('out/fonts'))
;
});
gulp.task('default', ['fonts']);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.