How to override CSS in Laravel?

Question

I'm making a website using Laravel and I'm happy with the standard CSS of it in the app.css file. However for one page I'd like to change the font size. Is there a way to import both the app.css and a customized CSS, so that the latter overrides the app.css? Or is there an easier way to do this? I want to change the style of text in tables, so I thought I had to use CSS for that. It's pretty much impossible to edit the app.css file because it's minimalized and I can't understand it.

Thanks in advance!

Best way is create a new css file and define it after app.css. all your overwritten code will be write in new file. — sunil kumar
– sunil kumar, Commented Oct 25, 2017 at 19:05
You should be editing app.scss, not app.css. If you're using layout, you could extend it with a @stack and on your desired page @push into that stack. — user8034901
– user8034901, Commented Oct 25, 2017 at 19:21

MalemScha · Accepted Answer · 2017-10-25 19:21:03Z

2

Put them in public folder and call it in the view with something like
<link href="{{ asset('css/mystyle.css') }}" rel="stylesheet">.
Make sure You put it after <link href="{{ asset('css/app.css') }}" rel="stylesheet">

edited Oct 25, 2017 at 19:21

answered Oct 25, 2017 at 19:05

MalemScha

3231 silver badge8 bronze badges

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

Comments

Giáp Nguyễn Trọng · Accepted Answer · 2023-04-17 02:30:05Z

0

you can try this: i use scss + scoped for this problem,

I add class cpl-lesson behind template then import css of vue in style tag

<template>
    <div class="row cpl-lesson"></div>
</template>

<style scoped lang="scss">
    .cpl-lesson {
        @import "bootstrap/scss/bootstrap.scss";
        @import url("~bootstrap-vue/dist/bootstrap-vue.css");
    }

</style>

answered Apr 17, 2023 at 2:30

Giáp Nguyễn Trọng

211 silver badge2 bronze badges

Comments

Renjith · Accepted Answer · 2017-10-26 02:29:07Z

-1

Create a new stylesheet in public/css/style.css
Include it into your blade template just like
<link href="{{ asset('css/style.css') }}" rel="stylesheet">

answered Oct 26, 2017 at 2:29

Renjith

2,5113 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to override CSS in Laravel?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related