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

How to set the image path from SCSS files #1217

Open
webmasterpf opened this issue Aug 3, 2023 · 5 comments
Open

How to set the image path from SCSS files #1217

webmasterpf opened this issue Aug 3, 2023 · 5 comments

Comments

@webmasterpf
Copy link

webmasterpf commented Aug 3, 2023

Hello,
I have an issue about my images path into my CSS. So after looking at webpack encore setting, I modifiy the location folder as it become this (tailwind syntax):
@apply bg-[url(assets/images/SVG/flag-france.svg)]; with this location /assets/images , in replacement of @apply bg-[url(../../images/SVG/flag-france.svg)]; linked to with images/ . Now I can see previsualisation images in vscode. But when I compile I get an error like this: ./css/src/tailwind.scss" contains a reference to the file "assets/images/SVG/flag-france.svg".
This syntax seem to work as equal in vscode: bg-[url(../../../../assets/images/SVG/flag-france.svg)]; But lead to the same error message :
This file can not be found, please check it for typos or update it if the file got moved.
So I don't understand why, do I need to change something in the webpack encore config ( as I used the basic config) .
https://gitlab.com/themes-d9/starter-d9-2022/-/blob/d5ec178af9a9299a5ea5395d1af8954257f27f18/webpack.config.js
What are your thoughts about this ? Thanks

@weaverryan
Copy link
Member

Hi!

I'm not sure - generally-speaking, Webpack wants you to use relative paths. So assets/images/SVG/... would NOT be the correct path, but something like ../images/SVG/.. WOULD be the correct idea - but the exact path would depend on where the source tailwind.scss and target flag-france.svg files live. I'm also not sure if Tailwind + SCSS together cause any issues - I've used those both, but never at the same time.

@stof
Copy link
Member

stof commented Aug 9, 2023

if you use both Sass and Tailwind (through Postcss) in your config, Postcss (and so Tailwind) will see the output of the Sass compilation as a single file. So when Tailwind resolves relative paths, it will do so relatively to your Sass entrypoint, not relatively to the Sass partial that you imported and which contains the code.

Sass itself does not have a feature to rewrite relative URLs from imported partials (there is a discussion about adding a feature for that in the Sass language in sass/sass#2535 but that feature is not ready yet)

@webmasterpf
Copy link
Author

Hi, so I need to wait about the feature at sass level ?

@webmasterpf
Copy link
Author

After thinking, perhaps can I modify the setting for the outpout path into webpack config ? Actually the setting is:

.setOutputPath('css/dist/')
 // public path used by the web server to access the output path
    .setPublicPath('/dist')

and images are into: /css/dist/images/ So if I modifiy public path to css/dist , images could be displayed ?

@carsonbot
Copy link

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants