Laravel-mix: CSS url() Rewriting ADD Option url with subfolder

[tnatanael]

When we compile a SCSS with some url like:

background: url('../images/thing.png');

The compiler, intentionaly generates the subsequent css:

background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);

Wonderfull! But...

Think about a Laravel Application residing in a subfolder of a domain, like:

http://www.domain.com/laravelapp/

We need an option to add a subfolder or full application url to the final css, to get a result like so

background: url(/laravelapp/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);
or
background: url(http://www.domain.com/laravelapp/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);

If we add the subfolder in sass asset, the compiler just not works, because he dont use the url just for compiling, but also to generate the url in output css...

I think something like
.option({
url_path_prefix: '/subfolder'
});

or

.option({
use_app_url: true
});

What do you think?

[tnatanael]

I found:

mix.setResourceRoot('../');

this applyes the resources to relative paths, this apparently solves the problem...

[medz]

Yeah, I'm the same question.
I solved it with mix.setResourceRoot.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[x2team]

` DONE Compiled successfully in 8968ms 7:17:14 PM

                                                                                          Asset      Size   Chunks             Chunk Names
                                                                                   /css/app.css   359 KiB  /js/app  [emitted]  /js/app
                                                                                     /js/app.js  2.21 MiB  /js/app  [emitted]  /js/app

fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?03783c5172ee1ad128c576bf88fac168 126 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?073c2f3ce60eaf69cc2767ef3d989078 674 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?ed2b8bf117160466ba6220a8f1da54a4 126 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?7559b3774a0625e8ca6c0160f8f6cfd8 72.8 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?fe9d62e0d16a333a20e63c3e7595f82e 85.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?fc9c63c8224fb341fc933641cbdd12ef 33.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?8fdea4e89ac405d9f8db327adb331d8d 141 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?59215032a4397507b80e5625dc323de3 33.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?e07d9e40b26048d9abe2ef966cd6e263 13.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?e5770f9863963fb576942e25214a226d 16.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?ef3df98419d143d9617fe163bf4edc0b 188 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?b557f56e367e59344ca95f9d1fb44352 820 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?acf50f59802f20d8b45220eaae532a1c 187 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?b5cf8ae26748570d8fb95a47f46b69e1 73.7 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?4bced7c4c0d61d4f988629bb8ae80b8b 95.7 KiB [emitted]
`

I have done the above, the browser has no errors. But when I >> npm run watch, I get the following message...

[erlangparasu]

I found:

mix.setResourceRoot('../');

this applyes the resources to relative paths, this apparently solves the problem...

Thanks! it works @tnatanael