how to use config file values in .css file in laravel

Question

I want to use Laravel config file values in my .css file to customize some colors how can I do this? or maybe it is impossible. I hope my question is clear Thank you.

my config file

return [
'custom' => [
    'mainLayoutType' => 'horizontal',
    'theme' => 'light',
    'sidebarCollapsed' => false,
    'navbarColor' => '',
    'navbarTextColor' => '#ffffff',
],

];

my css

.header-navbar .navbar-container ul.nav li > a.nav-link {
  color: #ffffff;
  padding: 1.6rem 1rem 1.35rem 0.5rem;
}

what I want to do is something like this

.header-navbar .navbar-container ul.nav li > a.nav-link {
  color: config('custom.navbarTextColor');
  padding: 1.6rem 1rem 1.35rem 0.5rem;
}

N69S · Accepted Answer · 2021-09-07 08:33:47Z

1

You cant add it in a CSS file or even a SCSS file. it has to be a PHP one.

There are two solutions that come to mind

The easy one is to add your css from config in a <style> tag in your blade file.

The hard way, is to return a css file via a route (/style.css). something like:

blade file (css.blade.php)

.header-navbar .navbar-container ul.nav li > a.nav-link {
    color: {{config('custom.navbarTextColor')}};
    padding: 1.6rem 1rem 1.35rem 0.5rem;
}

Route line

Route::get('/style.css', function() {
    return View::response('css')->header('Content-Type', 'text/css');
});

edited Sep 7, 2021 at 8:33

answered Sep 7, 2021 at 8:20

N69S

17.3k4 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Jalili Over a year ago

thanks for the help, I used the first solution @N69D

maki000 · Accepted Answer · 2021-09-07 08:27:55Z

1

You can dynamically add class to your root html element via php, then write styles in your css according to that.

Example:

<body>
  <main class="{{ config('theme') }}">
     ...
  </main>
</body>

answered Sep 7, 2021 at 8:27

maki000

3491 silver badge8 bronze badges

1 Comment

Mohammad Jalili Over a year ago

Thanks @Mario for the help

Collectives™ on Stack Overflow

how to use config file values in .css file in laravel

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related