How to set the image path from SCSS files

[webmasterpf]

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]

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]

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]

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

[webmasterpf]

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 ?