Undocumented default behavior: @font-face changes file paths and copies files

While using Elixir, paths were respected by the SASS processor.

My CSS was being output to public/assets/css/app.css with fonts living in public/assets/fnt/font-name/filename.ext for each file, so I could use url('../fnt/font-name/font-name.eot') without issue. Now that I’m using Mix my paths are being changed to point to public/fonts/font-name.ext with the files copied needlessly to that directory.

I did not ask for this. Now I’m maintaining a separate static font CSS file that I use to copy-paste over the generated font definition.

[alanondra]

Well you didn’t ask Mix to minify your code or apply CSS3 prefixing either, but it will.

Neither of which are potentially destructive processes as long as the syntax of the final result is valid, so this is a non-sequitur. Altering URLs is an active change in the actual value of data, and copying files that already existed increases the amount of space used on the server and clutter the directory structure.

I understand from further trials that the real power from this kind of functionality is being able to import resources from Node packages and the like, but executing these changes when they’re not necessary (i.e. the files already existing in public and the projected URLs pointing to them) just leads to confusion and frustration (and in my case, literally a whole wasted day). This should be explicitly stated in documentation as a side effect. There are already enough anti-patterns plaguing some of the Laravel components, and documentation on handling front-end resources is already missing tons of useful information.

[JeffreyWay]

Important to remember that Elixir and Mix are built on two completely different build tools. Webpack is much more powerful.

Now that I’m using Mix my paths are being changed to point to public/fonts/font-name.ext with the files copied needlessly to that directory.

It’s not needless. This is a feature, not a bug. 😃 Webpack will find all references to fonts, and move them to that location.

I did not ask for this.

Well you didn’t ask Mix to minify your code or apply CSS3 prefixing either, but it will.

Now I’m maintaining a separate static font CSS file that I use to copy-paste over the generated font definition.

You don’t need to do that. You can either update your font urls to be absolute (begin with a “/”, and Webpack will ignore them), or remove your public/fnt directory, and let Webpack put them where they need to go.