search

symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 198 forks source link

How to set the image path from SCSS files #1217

Open webmasterpf opened 1 year ago

webmasterpf commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 https://github.com/sass/sass/issues/2535 but that feature is not ready yet)

webmasterpf commented 1 year ago

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

webmasterpf commented 1 year ago

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 commented 1 week ago

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