Inappropriate assets placing problem caused by the url processing feature

[ihsanberahim]

Usually, public folder is really the place all assets loaded but in wordpress case is different.

In wordpress our public assets directory is inside the theme. mix.setPublicPath('public/themes/wordplate');

So, i found that bootstrap and ionicons miss place the fonts.

Temporarily, i do mix.copy. It fixed the problem but the assets now duplicated.

const theme_assets = 'public/themes/wordplate/assets';
mix.copy([
    `${theme_assets}/fonts/ionicons.eot`,
    `${theme_assets}/fonts/ionicons.svg`,
    `${theme_assets}/fonts/ionicons.ttf`,
    `${theme_assets}/fonts/ionicons.woff`,
    `${theme_assets}/fonts/ionicons.woff2`
  ], `public/fonts`);

Any idea to fix this?

[vinkla]

Does setting the public path fix the issue?

mix.setPublicPath('public/themes/wordplate');

Or maybe we could use the mix.setResourceRoot() method?

[ihsanberahim]

I think mix help us copy all assets in a scss/css such as fonts and pictures into the expected location. Unfortunately, normal framework like laravel is different assets location compared to wordpress.

Normal laravel a domain pointed to the public but wordpress public assets is in the theme dir like public/theme/wordplate/assets.

That's is why the font provided by the package miss placed.

[vinkla]

If you come up with a solution we would be really happy if you send us a pull request!

[puredazzle]

@ihsanberahim could you provide us with a more detailed code example where it doesn't work?

When I use mix and fonts it works as expected for example in my scss file import the fonts via:

@font-face {
  font-family: 'Europa-Light';
  src: url('../fonts/Europa-Light.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

When I build the app via mix / webpack the font gets moved to public/themes/wordplate/assets/fonts/ and the reference in the CSS-file is correct.

Please see here https://laravel.com/docs/5.4/mix#working-with-stylesheets and then the section about URL Processing.

[ihsanberahim]

@puredazzle this issue happen on the packages i used especially bootstrap and ionicons.

If the font from my template no issue.

[vinkla]

@ihsanberahim this might not be an issue with Laravel Mix then. Have you tried to use the .copy() function to copy the fonts from Bootstrap into the public directory?

[ihsanberahim]

@vinkla yes i did. Read my first comment, like that rite?

[vinkla]

Try specifying the entire path and just copy the fonts directory.

mix.copy('node_modules/path/to/fonts', 'public/fonts');

[ihsanberahim]

var elixir = require('laravel-elixir');

require('laravel-elixir-replace');

var replacements = [
    ['fonts/', '../fonts/'],
    ['images/', '../images/']
];

elixir(function(mix) {
   mix.replace('public/css/app.css', replacements);
}

I found this is great if anyone know how to use/add replace functionality. Expected can be use like this:

//...
var replacements = [
    ['../fonts/', `${theme_assets}/fonts/`]
];
//...
mix.js(`${resources}/js/app.js`, `${theme_assets}/js`)
  .sass(`${resources}/scss/app.scss`, `${theme_assets}/css`)
  .replace(`${theme_assets}/css/app.css`, replacements)
  .version()
//...

I tried but not work because we use laravel-mix not laravel-elixir