postcss import iconfont .woff .ttf未找到

Question

我通过npm css包导入了iconfont.css，但找不到iconfont.woff和iconfont.tff。我该如何解决？

gulpfile

var postcss = require('gulp-postcss');
var atImport = require('postcss-import');
var cssnano = require('cssnano');

gulp.task('importcss', function () {
    var processors = [
        atImport({}),
        cssnano()
    ];
    return gulp.src('./htdocs/css/common.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./htdocs/css-build/'))
});

Npm Css Fonticont

CSS / common.css

CSS-构建/ common.css

页

Answer 1

您需要在postcss-import之后使用https://github.com/postcss/postcss-url。 postcss-url将调整您的URL路径。

默认情况下，它会调整您的网址以引用node_modules中的原始文件。

如果您的部署中未包含node_modules，则无效。要解决此问题，请将url option设置为copy。这会将所有资产复制到css-build/assets/并相应地调整网址。

您还可以将url设置为inline，这将对您的所有资产进行base64编码并对其进行内联。除非你的资产非常小，否则我不建议使用它。