Webfonts referenced in stylesheet don't have the correct URL

maicol07 commented 3 years ago

Describe the bug

Webfonts use the webserver URL and not the resources URL (the URL of the Vite server). For example:

My webserver is located at http://127.0.0.1:8000 My Vite server is located at http://localhost:3000 I use this icon webfont: @mdi/font

Webfont is imported as http://127.0.0.1:8000/node_modules/.pnpm/@mdi+font@5.9.55/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=5.9.55 instead of http://127.0.0.1:3000/node_modules/.pnpm/@mdi+font@5.9.55/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=5.9.55 (note the port)

Reproduction

Install the @mdi/font webfont.
Add this code in your SCSS file:
```
@use '@mdi/font';
```
See the issue in your webserver

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 936.25 MB / 31.79 GB
  Binaries:
    Node: 14.16.1 - C:\laragon\bin\nodejs\node-v14\node.EXE
    npm: 7.20.3 - C:\laragon\bin\nodejs\node-v14\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (92.0.902.84), ChromiumDev (94.0.992.4)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vite: ^2.4.4 => 2.5.1

Used Package Manager

pnpm

Logs

> openstamanager@ dev C:\Users\Maicol\Documents\Progetti\Web\osm_rewrite
> concurrently --raw npm:serve-php npm:serve-dev

> serve-php
> php artisan serve

> serve-dev
> vite

Starting Laravel development server: http://127.0.0.1:8000
[Mon Aug 30 18:24:17 2021] PHP 8.0.8 Development Server (http://127.0.0.1:8000) started

  vite v2.5.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1704ms.

[Mon Aug 30 18:24:26 2021] 127.0.0.1:55737 Accepted
[Mon Aug 30 18:24:27 2021] 127.0.0.1:55737 Closing
[Mon Aug 30 18:24:27 2021] 127.0.0.1:55745 Accepted
[Mon Aug 30 18:24:27 2021] 127.0.0.1:55745 [200]: GET /images/favicon/favicon.ico
[Mon Aug 30 18:24:27 2021] 127.0.0.1:55745 Closing
[Mon Aug 30 18:24:32 2021] 127.0.0.1:55758 Accepted
[Mon Aug 30 18:24:32 2021] 127.0.0.1:55758 Closing
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/ListPage.jsx" points to missing source files
[Mon Aug 30 18:24:32 2021] 127.0.0.1:55769 Accepted
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Page.jsx" points to missing source files
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Component.jsx" points to missing source files
[Mon Aug 30 18:24:33 2021] 127.0.0.1:55769 Closing
[Mon Aug 30 18:24:33 2021] 127.0.0.1:55770 Accepted
[Mon Aug 30 18:24:33 2021] 127.0.0.1:55770 Closing
[Mon Aug 30 18:25:18 2021] 127.0.0.1:56381 Accepted
[Mon Aug 30 18:25:19 2021] 127.0.0.1:56381 Closing
[Mon Aug 30 18:25:19 2021] 127.0.0.1:56382 Accepted
[Mon Aug 30 18:25:19 2021] 127.0.0.1:56382 Closing
[Mon Aug 30 18:25:19 2021] 127.0.0.1:56383 Accepted
[Mon Aug 30 18:25:19 2021] 127.0.0.1:56383 Closing
18:25:33 [vite] vite.config.js changed, restarting server...
[Mon Aug 30 18:25:33 2021] 127.0.0.1:56625 Accepted
[Mon Aug 30 18:25:34 2021] 127.0.0.1:56625 Closing
[Mon Aug 30 18:25:35 2021] 127.0.0.1:56637 Accepted

  vite v2.5.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1677ms.

[Mon Aug 30 18:25:35 2021] 127.0.0.1:56637 Closing
[Mon Aug 30 18:25:37 2021] 127.0.0.1:56650 Accepted
[Mon Aug 30 18:25:37 2021] 127.0.0.1:56650 [200]: GET /favicon.ico
[Mon Aug 30 18:25:37 2021] 127.0.0.1:56650 Closing
18:25:37 [vite] vite.config.js changed, restarting server...

  vite v2.5.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1738ms.

[Mon Aug 30 18:25:43 2021] 127.0.0.1:56707 Accepted
[Mon Aug 30 18:25:44 2021] 127.0.0.1:56707 Closing
[Mon Aug 30 18:25:44 2021] 127.0.0.1:56719 Accepted
[Mon Aug 30 18:25:44 2021] 127.0.0.1:56719 [200]: GET /images/favicon/favicon.ico
[Mon Aug 30 18:25:44 2021] 127.0.0.1:56719 Closing
[Mon Aug 30 18:25:50 2021] 127.0.0.1:56749 Accepted
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/ListPage.jsx" points to missing source files
[Mon Aug 30 18:25:50 2021] 127.0.0.1:56749 Closing
[Mon Aug 30 18:25:50 2021] 127.0.0.1:56754 Accepted
[Mon Aug 30 18:25:50 2021] 127.0.0.1:56754 Closing
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Page.jsx" points to missing source files
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Component.jsx" points to missing source files
[Mon Aug 30 18:25:50 2021] 127.0.0.1:56755 Accepted
[Mon Aug 30 18:25:51 2021] 127.0.0.1:56755 Closing
18:28:02 [vite] vite.config.js changed, restarting server...
[Mon Aug 30 18:28:02 2021] 127.0.0.1:58393 Accepted
[Mon Aug 30 18:28:02 2021] 127.0.0.1:58393 Closing
[Mon Aug 30 18:28:03 2021] 127.0.0.1:58402 Accepted

  vite v2.5.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1672ms.

[Mon Aug 30 18:28:03 2021] 127.0.0.1:58402 Closing
[Mon Aug 30 18:28:11 2021] 127.0.0.1:58471 Accepted
[Mon Aug 30 18:28:12 2021] 127.0.0.1:58471 Closing
[Mon Aug 30 18:28:12 2021] 127.0.0.1:58481 Accepted
[Mon Aug 30 18:28:12 2021] 127.0.0.1:58481 [200]: GET /images/favicon/favicon.ico
[Mon Aug 30 18:28:12 2021] 127.0.0.1:58481 Closing
[Mon Aug 30 18:28:15 2021] 127.0.0.1:58501 Accepted
[Mon Aug 30 18:28:15 2021] 127.0.0.1:58501 Closing
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/ListPage.jsx" points to missing source files
[Mon Aug 30 18:28:16 2021] 127.0.0.1:58507 Accepted
[Mon Aug 30 18:28:16 2021] 127.0.0.1:58507 Closing
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Page.jsx" points to missing source files
[Mon Aug 30 18:28:17 2021] 127.0.0.1:58508 Accepted
[Mon Aug 30 18:28:17 2021] 127.0.0.1:58508 Closing
Sourcemap for "C:/Users/Maicol/Documents/Progetti/Web/osm_rewrite/resources/js/Components/Component.jsx" points to missing source files
18:28:33 [vite] hmr update /resources/scss/app.scss
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58576 Accepted
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58576 Closing
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58577 Accepted
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58577 Closing
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58578 Accepted
[Mon Aug 30 18:28:36 2021] 127.0.0.1:58578 Closing
18:29:09 [vite] hmr update /resources/scss/app.scss (x2)
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58748 Accepted
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58748 Closing
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58749 Accepted
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58749 Closing
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58750 Accepted
[Mon Aug 30 18:29:12 2021] 127.0.0.1:58750 Closing
18:36:58 [vite] hmr update /resources/scss/app.scss (x3)
[Mon Aug 30 18:37:01 2021] 127.0.0.1:59910 Accepted
[Mon Aug 30 18:37:01 2021] 127.0.0.1:59910 Closing
[Mon Aug 30 18:37:01 2021] 127.0.0.1:59913 Accepted
[Mon Aug 30 18:37:02 2021] 127.0.0.1:59913 Closing
[Mon Aug 30 18:37:02 2021] 127.0.0.1:59914 Accepted
[Mon Aug 30 18:37:02 2021] 127.0.0.1:59914 Closing
[Mon Aug 30 18:37:02 2021] 127.0.0.1:59915 Accepted
[Mon Aug 30 18:37:02 2021] 127.0.0.1:59915 Closing

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

github-actions[bot] commented 2 years ago

Hello @maicol07. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

bluwy commented 2 years ago

Please provide a reproduction for this. I'm not sure how the webserver is set up, and how it interacts with the Vite dev server. It may be a misconfiguration somewhere, but it's hard to tell without the code for the project.

vitejs / vite