Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

static assets in CSS url() without opening slash is not resolved or bundled #9800

Closed
7 tasks done
xsjcTony opened this issue Aug 23, 2022 · 1 comment · Fixed by #10331
Closed
7 tasks done

static assets in CSS url() without opening slash is not resolved or bundled #9800

xsjcTony opened this issue Aug 23, 2022 · 1 comment · Fixed by #10331
Labels
inconsistency Inconsistency between dev & build p2-nice-to-have Not breaking anything but nice to have (priority)

Comments

@xsjcTony
Copy link

xsjcTony commented Aug 23, 2022

Describe the bug

Static assets in CSS url() without opening slash / is not resolved or bundled with vite build.

For example, background-image: url('src/assets/sample.svg') will remain as is, without any file copied or path changed.

But background-image: url('/src/assets/sample.svg') will work correctly, with path changed to url('/assets/sample.svg') and file copied.

Both of the above are working correctly in dev mode.

I'm not sure if it's my problem or my responsibility to ensure the opening slash exists, but I can't find any related info in the doc or here. Sorry if I just missed something.

Reproduction

https://stackblitz.com/edit/vitejs-vite-2j2snf?file=src/App.css

System Info

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 3.17 GB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0
    Safari: 15.6
  npmPackages:
    @vitejs/plugin-react: ^2.0.1 => 2.0.1 
    vite: ^3.0.9 => 3.0.9

Used Package Manager

pnpm

Logs

No response

Validations

@sapphi-red
Copy link
Member

Paths without the first / means relative path.
So in src/App.css, src/assets/sample.svg means src/src/assets/sample.svg and the behavior in build is correct.

I think we need a warning or make it consistent.

@sapphi-red sapphi-red added p2-nice-to-have Not breaking anything but nice to have (priority) inconsistency Inconsistency between dev & build labels Aug 23, 2022
patak-dev pushed a commit that referenced this issue Oct 24, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Nov 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
inconsistency Inconsistency between dev & build p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants