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
url with relative path in sass/scss is broken when main.js and assets are in subdirectory #11012
Comments
Thanks for creating this.
But I forgot about this while creating #10741. |
I believe I'm seeing the same symptom. I'm just not sure if the cause is the same. Here is my reproduction: https://github.com/roydukkey/moist/tree/vite/issue-11012 |
I think I ran into the same issue: created a new vite-vanilla-typescript project, added
In main.ts I import the bootstrap-icons via
But when using (It also fails with the same error when importing *.scss) Came here after a long time of finding out what might be wrong while learning web dev with vite/scss from here: twbs/icons#1381 (vite 4.1.0) |
I have faced similar problems when using the library from @ArcGIS. Thanks for the information. |
Is there any news about this bug or workaround? I'm facing this issue with the |
@oussama-he the workaround for This works because // NOTE: this is a workaround for the vite-sass issue of loading the woff files in bootstrap-icons.scss using variables
$bootstrap-icons-font-file: "~bootstrap-icons/font/fonts/bootstrap-icons";
@import "~bootstrap-icons/font/bootstrap-icons.scss"; |
@frederikbosch you add it to the alias section of the vite.config.js see https://vitejs.dev/config/shared-options.html#resolve-alias // https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~bootstrap': fileURLToPath(new URL('./node_modules/bootstrap', import.meta.url)),
'~bootstrap-icons': fileURLToPath(new URL('./node_modules/bootstrap-icons', import.meta.url)),
}
}
}) |
Getting this as well, and it is the one thing that is absolutely blocking me from easily moving off of Create React App. [Edit] |
This is currently blocking us from moving from a custom webpack build on a larger legacy app to vite. We have a lot of scss files for fonts etc. that are imported in a variety of other scss files. Sadly this breaks right now as we get errors like these:
Is there any feasible workaround for this that doesn't include changing all the relative paths? |
facing the same issue here. |
Also encountering this problem. It does not seem to require that "main.js and assets are in subdirectory", as per title. Given this directory structure
Simply using
So I find it quite strange that the documentation still states:
|
Describe the bug
Following on from my comment in #7651 - the linked PR (#10741) doesn't solve the issue when main.js and assets are stored in a top level assets directory, e.g.:
You can see in the linked reproducer that
url('../../images/vite.svg')
does not resolve the image correctly, even though that is the correct relative path to the file fromassets/styles/pages/home.scss
. When the path is changed tourl('../images/vite.svg')
it resolves correctly.Reproduction
https://github.com/andyexeter/vitejs-vite-2btrkm
Steps to reproduce
Run
npm install
followed bynpm run dev
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: