Andi1982's avatar

Laravel-Mix building app.css with old resource file

hey there,

I have a strange behavior of Laravel-Mix. If I change or add some style in my /resources/css/app.css and do 'npm run dev' it is building the /public/css/app.css, but my last changes are not included:

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import '@fortawesome/fontawesome-free/css/all.css';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'lightbox2/dist/css/lightbox.css';
@import 'typeahead/style.css';

@layer components {
    .card {
        @apply bg-gray-100 rounded-3xl overflow-hidden shadow-md flex flex-col;
    }

    .card-ape {
        @apply bg-green-50 rounded-3xl border-4 border-green-200 overflow-hidden shadow-md flex flex-col;
    }
    .badge-img {
        @apply bg-gray-100 bg-opacity-90 text-xs uppercase font-bold rounded-full p-2 absolute bottom-1 right-1;
    }
    .badge-vid {
        @apply bg-gray-100 bg-opacity-90 text-xs uppercase font-bold rounded-full p-2 absolute bottom-1 left-1;
    }

    /* Neues Layout */
    .vote-btn {
        @apply p-1 rounded-2xl border shadow-md text-center
    }

    .vote-pro {
        @apply border-green-600 hover:bg-green-200 text-green-600
    }

    .vote-pro.active {
        @apply bg-green-200
    }

    .vote-contra {
        @apply border-red-600 hover:bg-red-200 text-red-600
    }
    .vote-contra.active {
        @apply bg-red-200
    }

    .filter-list .active {
        @apply border rounded-full px-2 py-1 border-green-600 bg-green-600 text-white font-semibold
    }

    .filter-list a:hover {
        @apply underline
    }

    .my-button {
        @apply border-2 p-2 rounded-2xl
    }
}

the last class '.my-botton' is newly added. But does not appear in public/css/app.css. But if I remove everything in layer-components it is removing all this things from generated app.css file. If I then just add the my-button, it does not appear in generated output file.

Can someone explain what is happening?

I am working on win10 with php8.2 and

D:\>npm -v
9.5.1

D:\>npx -v
9.5.1

D:\>node -v
v18.16.0

All morning everything worked fine. Maybe some kind of Cache in node is running full?

0 likes
5 replies
tykus's avatar
tykus
Best Answer
Level 104

Are you purging your CSS from unused classes; is .my-button used in a watched file/directory?

1 like
Andi1982's avatar

I found the reason. I just did not use this classes, so it won't be added to the output css-file. I had it first in my blade file and used it, but then moved some code into controller and this is not observed for used css-classes and won't add them to the generated css-file.

It came to me right after submitting this post here. Sometimes it just helps to explain the problem to somebody.

Sorry for bothering you ... but thanks for fast reply!

Andi1982's avatar

@tykus Yes, finally your comment would have helped me to find my mistake.

So again, thanks a lot for your fast reply!

Please or to participate in this conversation.