Voyager: Voyager styles compile

[snax4a]

Description

Invitation to your slack is not working so i decided to write here.
I wonder how can i configure laravel mix to update css and js changes in voyager files
Do i need to npm install in voyager folder?
i have node modules in main laravel folder but how to use laravel mix to compile voyager styles?

[fletch3555]

What are you looking to change?

Voyager is intended to be self-contained, so you'd need to run npm install inside vendor/tcg/voyager, make your changes, run npm run dev (I think), then cd to your project root and run artisan vendor:publish to publish the newly built app.js/app.css

[snax4a]

I made npm install in vendor/tcg/voyager tried to npm run dev also vendor:publish but still css changes are not applied i thin i should somehow run watch command or configure laravel mix to compile this assets

[snax4a]

I just read in documentation that i can link my custom css so in voyager.php i uncommented
'additional_css' => [ 'css/custom.css', ],
and created custom.css in voyager/publishable/assets/css/ but its not working
should i add this file in my root public assets?

[fletch3555]

You should never need to edit anything under vendor. The additional_css config is a good option. It expects the path to start from /public, so if you tell it to load css/custom.css, then it needs to live at /public/css/custom.css

Again, what are you looking to change?

[snax4a]

Im trying to change loader animation.
Okay i created custom.css here /public/css/custom.css and additional_css is set up but still its not added to the view, should i add it manually?

[emptynick]

The loading-animation (image) is a setting, you can change that there.
Which is the exact path to the config you changed?

[snax4a]

I noticed that config('voyager.additional_css') and any other config from voyager.php is not working
i tried php artisan vendor:publish php artisan cache:clear but nothing refreshes my config :(

[emptynick]

There's also php artisan config:clear if you cached your config before.
But what is the exact path to the config you are editing?

[snax4a]

Ach,... i was editing voyager.php in vendor/publishable/config/voyager.php
Now i edited voyager.php in root application config folder and it works
Can you explain me what is this publishable folder in vendor voyager? shouldnt i edit anything there?

[fletch3555]

Per my previous comment, you should never have to modify anything under vendor

[snax4a]

fletch i just dont understand why this files are duplicated why it needs a vendor config if the same is in root config
You say i should never modify anything under vendor but voyager blade templates are there so if i want to change the design i have to modify them

[emptynick]

Voyager takes the files from vendor/..../publishable and copies them in the corresponding folder outside of the vendor folder (e.g. vendor/tcg/voyager/publishable/voyager.php goes to ~root~/config/voyager.php so you dont have to edit them.
Normally, there is a Laravel-way to override vendor-stuff, like overriding package language files or overriding package views

[jo66]

I face the same problem. I uncommented 'additional_css' => [ 'css/custom.css', ], in config/voyager.php and my custom.css is located in public/css/custom.css.
Sadly no change and from output its seems that my css file is not loaded:

Laravel development server started: <http://127.0.0.1:8000>
[Wed Oct  3 20:22:20 2018] 127.0.0.1:37712 [200]: /vendor/tcg/voyager/assets/css/app.css
[Wed Oct  3 20:22:20 2018] 127.0.0.1:37716 [200]: /vendor/tcg/voyager/assets/images/logo-icon-light.png
[Wed Oct  3 20:22:20 2018] 127.0.0.1:37722 [200]: /vendor/tcg/voyager/assets/images/bg.jpg

I tried to clean cache, view, and config, without luck.
npm install fails in vendor/tcg/voyager, but from what I understood it shouldn't be necessary for loading css via config/voyager.php
What I miss?

[emptynick]

You dont need public/ in the path.

[jo66]

Thanks for your help. Sadly no more luck with css in css/custom.css

[emptynick]

I am very sure you will find a solution here in this issue.

[emptynick]

Closing as the issue seems to be resolved.

[jo66]

Issue is not resolved, for now I try other tools, but I really would like to achieve it in Voyager.

[emptynick]

Everything is documented here
If this isn't working there are just a few possibilities, like config-caches, wrong modified config-file, or wrong path.

[jo66]

I've read documentation before to post.
Tell me if I miss something:

• config-caches => I did php artisan config:clear

• config-file => I used APPLICATION_PATH/config/voyager.php, and I just uncommented 'css/custom.css', line under 'additional_css' (I run fresh install of Voyager)

• path => I tried both APPLICATION_PATH/css/custom.css and APPLICATION_PATH/public/css/custom.css

[chiechelski]

Hey @jo66 ,
Same issue here. I think the custom.css is not implemented or doesn't work on the login page. It seems to be loading fine once I log in.

[emptynick]

@chiechelski check https://github.com/the-control-group/voyager/issues/3639

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you have further questions please ask in our Slack group.