css - 找不到 postcss 导入 iconfont .woff .ttf

Question

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

吞咽文件

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 字体

css/common.css

css-build/common.css

页面

Answer 1

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

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

如果您不在部署中包含 node_modules，它将无法工作。要解决此问题，请设置 url option到复制。这会将所有 Assets 复制到 css-build/assets/ 并相应地调整 URL。

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