@livewireStyles - where is css files

#1

Hi
I have created a simple project and find @livewireStyles instruction in app.balde.php
But I can’t find style files of project *.css files. Where they are? What folder they are?

PS
resources/css/app.css contains nothing - i deleted lines from there

#2

When in doubt, look at the source.

The Livewire service provider registers the Blade directives: https://github.com/livewire/livewire/blob/master/src/LivewireServiceProvider.php#L241

Which calls a method: https://github.com/livewire/livewire/blob/master/src/LivewireBladeDirectives.php#L21

Which renders the styles: https://github.com/livewire/livewire/blob/master/src/LivewireManager.php#L122

As you can see, the styles are just made inline in a style tag, there is no file served.

#3

Thank you very much, I understand about this instruction.
But let me rephrase my question. The fact is that the file app.css is empty, but when I look at the home page, I see that the file contains almost 213,000 lines of code. Where do they come from?

#4

Are you looking for the compiled app.css that gets generated when you run npm run? It gets generated to /public/css/app.css. The @livewireStyles directive embeds some styling niceties for debugging and I don’t know that they’re necessary for production. These styles are embedded inline and can be found after <!-- Livewire Styles --> in your source html.

#5

Hi again
I made changes to /public/css/app.css but they don’t work, why?

#6

You can’t change /public/css/app.css directly, take a look at resources/css/app.css and add your CSS, after that compile the assets by:

npm run dev

Or if you deploy your application to a production server:

npm run production
#7

My resources/css/app.css is empty.
And, for examle, if I want change
.sm:max-w-lg {
max-width: 42rem;
}
in public/css/app.css what should I do?

#8

You can make changes to /public/css/app.css but it’ll get overridden any time you recompile. Check out your webpack.mix.js to make sure you’re editing the proper files that are being compiled.

Also, your question is more general laravel information. You might have better response/guidance on another forum as the focus here is on livewire.