URL rewriting CSS in NPM Packages?
Hello there community,
It seems that I have some sort of problem to understand how the rewrite url engine works within Laravel Mix when copying assets from a NPM package. Till now I have added multiple NPM packages which only copied font files. This fonts are copied (by default) to a new public/fonts/ directory.. Which is fine by me.
Beside the automatic generated directories (css, js and fonts) I wish to use my own img/ directory for storing images which needs to be used within my application. So the structure I wish to keep is as follows:
|-- public/
|------css/
|------fonts/
|------img/
|------js/
Now the problem which occurs is that when I add a NPM package, which has its own image/ folder, mix will copy this directory as follows:
|-- public/
|------css/
|------fonts/
|------images/
|------img/
|------js/
I tried to copy the files, and disable url rewriting, for the image directory within the NPM package via:
.sass('resources/sass/libs/datatables.scss', 'public/css/datatables.css')
.copy('node_modules/datatables.net-dt/images', 'public/img/datatables')
.options({
processCssUrls: false
});
But after compiling my webpack.mix.js file I have invalid urls within the compiled CSS (because the stylesheet, which is extracted via Mix, exists within this same NPM package and linking to the images/ directory):
.sorting{background-image:url("../images/sort_both.png")}
I have tried to enable the processCssUrls, but this will give me two image directories (the one from the vendor images/ and the one I choose as output in my mix file img/datatables/, with the stylesheet still being linked to the images/ directory.
I know that I could rename my img/ directory to images/, but doesn't this mean that the same error will occurs when adding a NPM package which has its image folder called img/? Or is this against the NPM guidelines?
I hope someone can help me out! ( or at least understand my question ).
Kind Regards.
Please or to participate in this conversation.