JayD's avatar
Level 11

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.

0 likes
0 replies

Please or to participate in this conversation.