Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

when "url" is a function in vite, the path string become a base64 code. I means it use 'inline', but I want 'rebase'.

Đang mở
  • Có gì không ổn?
#183 1 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
38/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript
Lĩnh vực
build-system, tooling

Hướng nghiên cứu

Start with the postcssUrl callback shown in the issue and reproduce it through the Vite css.postcss configuration described in the Vite shared-options documentation. Compare the generated font URLs with the Rollup behavior mentioned; done means the callback produces the requested relative paths without converting the fonts to data URLs.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

I follow this doc in vite: https://vite.dev/config/shared-options.html#css-postcss

And I want to change the font file path in css after build.

before:

@font-face {
  font-family: iconfont;
  src:
    url("./assets/fonts/iconfont.woff2?t=1722856322648") format("woff2"),
    url("./assets/fonts/iconfont.woff?t=1722856322648") format("woff"),
    url("./assets/fonts/iconfont.ttf?t=1722856322648") format("truetype");
}

after, I want this

@font-face {
  font-family: iconfont;
  src:
    url("../assets/fonts/iconfont.woff2?t=1722856322648") format("woff2"),
    url("../assets/fonts/iconfont.woff?t=1722856322648") format("woff"),
    url("../assets/fonts/iconfont.ttf?t=1722856322648") format("truetype");
}

this is my config:

css: {
    postcss: {
      plugins: [
        postcssUrl({
          url: (asset) => {
            if (!/\.(woff|woff2|ttf)$/.test(asset.pathname || '')) {
              return asset.url;
            }
            // ensure paths are correct in npm publish
            return `../assets/fonts/${asset.url.split('/').pop()}`;
          },
        }),
      ],
    },

But the result is

@font-face{font-family:iconfont;src:url(data:font/woff2;base64,d09GMgABAAAAAAQw

If I understand correctly, it uses inline mode internally, and I want to use a relative path string, so how can I make it use rebase mode?

By the way, I did something similar in rollup, and I did find that it defaulted to rebase mode, which was different from the result of vite.

Ngôn ngữ chính
JavaScript
Star
383
Fork
58
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của postcss/postcss-url

Tất cả issue của postcss/postcss-url

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.