【问题标题】: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 编码并内联。除非您的资产非常小,否则我不建议使用它。

【讨论】:

    猜你喜欢
    • 2016-10-20
    • 1970-01-01
    • 2017-05-05
    • 1970-01-01
    • 2018-09-17
    • 2014-10-26
    • 1970-01-01
    • 2021-08-02
    • 2016-08-05
    相关资源
    最近更新 更多