Laravel-mix: Wrong laravel mix rewrite url path when place project in subfolder

[fzldn]

I did install my laravel project on http://localhost/laravel and I run this project in browser at http://localhost/laravel/public

current url path on compiled scss files is font/vendor/something, can laravel mix replace url path with relative path base on compiled scss like ../fonts/vendor/something?

I knew if I run my project with php artisan serve it won't be a problem, what if I install my project in subfolder?

[ramakrishnamundru]

@fzldn try
mix.setResourceRoot('/laravel/public/');

[fzldn]

@ramakrishnamundru it works fine, thanks

mix.setResourceRoot('../');

[gregorskii]

This does not work for me. Assets are output without my folder prefix.

[themismin]

@gregorskii me too

[gbelisario]

I solved this problem using this:

{{ url(mix('/all.min.css')) }}

[Keyur-Galdhariya]

@fzldn try
mix.setResourceRoot('/laravel/public/');

In which file I need to put this code? I tried after put it into webpack.mix.js file that is in laravel root directory but it is not worked for me.
Can you please suggest file name?

[mazyvan]

I think the workaround of @gbelisario is better. Because in a shared project anyone in the team must be able to decide how to run the project. It's inconceivable for me that using the "proper" way everything else in the project using URL::asset work perfectly find but mix() files doesn't.

[Xavier-IV]

For me, it also worked using asset. This is great if your project is inside sub folders.

{{ asset(mix('/js/yourfile.js')) }}

You can actually see that from the mix manifest, it is attached to the root, /js/yourfile.js.

Adding asset() will post-fix those /js/yourfile.js to proper current project folder.

Without asset: http://localhost/js/yourfile.js
With asset: http://localhost/your/nested/subfolders/public/js/yourfile.js

[MGParisi]

Im having this issue. I tried @fzldn solution to no success. I added it to the webpack.mix.js so that my file looks like this...

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/assets/js')
    .sass('resources/assets/sass/app.scss', 'public/assets/css')
    .sass('resources/assets/sass/header.scss', 'public/assets/css')
    .setResourceRoot('/manpower/public/');

This did NOT fix the issue. :(

This is the SCSS...
background: url(/public/assets/images/bg-page-heading.jpg);

This is the result...
background: url(/public/assets/images/bg-page-heading.jpg);

This path gives an error...
assets/images/bg-page-heading.jpg

Ive tried a few different solutions to little to no effect.

[MGParisi]

For me, it also worked using asset. This is great if your project is inside sub folders.

{{ asset(mix('/js/yourfile.js')) }}

You can actually see that from the mix manifest, it is attached to the root, /js/yourfile.js.

Adding asset() will post-fix those /js/yourfile.js to proper current project folder.

Without asset: http://localhost/js/yourfile.js
With asset: http://localhost/your/nested/subfolders/public/js/yourfile.js

On what file did you add this too? A .blade or .php? What about .scss?

Ive tried adding symphony commands in a scss, and All I get is errors.

[Xavier-IV]

@MGParisi I put the code inside my .blade.php, as like any other html syntax

<script src="{{ asset(mix('/js/yourfile.js')) }}"></script>

For your SCSS, it is being compiled into CSS. It means that your image is relative to that compiled folder location.

Eg, below might be your structure project of public:

/public
|-- /css
|----/app.css
|--/assets
|----/images
|------/bg-page-heading.jpg

So, to retrieve your bg-page-heading.jpg, you would adjust your SCSS as follow:

background: url(../assets/images/bg-page-heading.jpg);

Notice the .. to state that, "Hey, go back one folder, and then to assets, images and finally my image that I want"

[shnslmz]

Hello Guys,

Often, when you are not working in the root directory, this problem occurs (due to wrong path).

There are two options:

1. You have to repair all paths (files, mix etc),
2. Move your project to root directory or change conf file for the your path of project.

See also

[AeonFr]

I'm having the same problem.

The app.js file loads correctly (using {{asset()}}), but the webpack chunks are still being fetched from the root folder /.

.setResourceRoot in the webpack.mix.js file didn't seem to have any effect.

If anyone else arrived here for having this problem, see issue #1513

[shamimbdpro]

Hello brothers. i'm having same issue. when click the linked file it redirecting to wrong path and skip 2 dir.
please look up my file structure
http://prntscr.com/pcgf8o
http://prntscr.com/pcgfpz
http://prntscr.com/pcgfwj
http://prntscr.com/pcgg3w
when click its redirecting to http://localhost/css/app.css?id=577fcf1b727f3ba9d298
its shoult to redirect to http://localhost/anan/public/css/app.css?id=577fcf1b727f3ba9d298

i'm suffering this problem for many days please someone help me

[ha5il]

I added 'mix_url' => env('APP_URL', 'http://localhost'), on config/app.php and also set the APP_URL on env as per subfolder to solve this.

[coolsam726]

I added 'mix_url' => env('APP_URL', 'http://localhost'), on config/app.php and also set the APP_URL on env as per subfolder to solve this.

This saved my day

[naimurhasan]

I solved this problem using this:

{{ url(mix('/all.min.css')) }}

I'm using jetstream and it does work for me.

[aliatifali89]

I think the workaround of @gbelisario is better. Because in a shared project anyone in the team must be able to decide how to run the project. It's inconceivable for me that using the "proper" way everything else in the project using URL::asset work perfectly find but mix() files doesn't.

thanks buddy