Wordpress Plugin Development - Webpack and CSS url() not working right

Question

I'm new to wordpress plugin development, but have experience with Laravel, Symfony, VueJS, Angular, etc.

I started a wordpress plugin for a small project of mine and wanted to us Laravel Mix (webpack) to compile my VueJS and CSS. I'm running into an issue where some of the node packages i've installed have url() in their CSS to files relative to their location (node_modules/package/main.css is reverencing fonts in node_modules/package/fonts/something.ttf by using url(./fonts/something.ttf)).

When I compile the code and go to the page it is being loaded on, I see that it's trying to load the URLs from the root of the domain.com/fonts/main.css.

How do you guys use webpack with your JS/CSS so your plugins are completely standalone from the Wordpress theme?

main.css

@import "~bootstrap";
@import "~primevue/resources/themes/saga-blue/theme.css";
@import "~primevue/resources/primevue.min.css";
@import "~primeicons/primeicons.css";
@import '~@fortawesome/fontawesome-pro/css/all.css';

node_modules/primeicons/primeicons.css

@font-face {
  font-family: 'primeicons';
  font-display: block;
  src: url('./fonts/primeicons.eot');
  src: url('./fonts/primeicons.eot?#iefix') format('embedded-opentype'), url('./fonts/primeicons.ttf') format('truetype'), url('./fonts/primeicons.woff') format('woff'), url('./fonts/primeicons.svg?#primeicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

Webpack isn't compiling the fonts correctly.

webpack.mix.js

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

mix
  .js('assets/js/main.js', 'build')
  .sass('assets/css/main.scss', 'build')
  .setPublicPath('dist')
  .copyDirectory('assets/img', 'dist/build/img')
  .vue({ version: 3 })
;

Here is my console error

Any idea how to compile css/fonts in a plugin using tooling like webpack/mix?

Wordpress Plugin Development - Webpack and CSS url() not working right

0 Answers0