postcss 导入 iconfont .woff .ttf 未找到

【问题标题】：postcss import iconfont .woff .ttf not foundpostcss 导入 iconfont .woff .ttf 未找到
【发布时间】：2016-11-08 04:49:55
【问题描述】：

我通过 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 字体

css/common.css

css-build/common.css

页面

【问题讨论】：

如何导入图标字体？我什么也没看到，这让我觉得你内联它们......

标签： css filepath postcss

【解决方案1】：

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

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

如果您的部署中不包含node_modules，它将不起作用。要解决此问题，请将url option 设置为copy。这会将所有资产复制到 css-build/assets/ 并相应地调整 URL。

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

【讨论】：