How to change value appcss in laravel

Question

I want to change background color in laravel page. Based on reference that i get. i should make a change in _variables.scss.

// Body
$body-bg: #f8fafc; --> i change it to #000

// Typography
$font-family-sans-serif: "Nunito", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
........

In views file, i put code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ICan</title>
    <link rel="stylesheet" href="/css/app.css"> --> i enter this one
  </head>
  <body>
    @yield('content')
    @include('inc.sidebar')
  </body>
</html>

And then i do npm run serve in cmd But nothing happen in my page. The background color doesn't change. Did i do something wrong?

Please help me. Thank you :))

Z.Quintana · Accepted Answer · 2018-11-08T06:25:54.133

0

You arent doing anything wrong, simply missing a step. Before serving the application, do this:

npm run dev

This will compile all of your scss files into your app.css file

however if you dont want to run this command every time you make a change in your scss file's, run the following:

npm run watch

This will watch for changes and run the compilation when a change occurs!

edited Nov 08 '18 at 06:25

answered Nov 08 '18 at 06:05

Z.Quintana

16
3

oh i'm sorry, i mean after edit files variables and views. i did 'npm run dev' not 'npm run serve'. But still nothing happen. – Hana Hae Nov 08 '18 at 07:29
I truly apolagize, but im really not to sure what it is you are asking or trying to acheive. Can you possibly explain it differently or give a scenario of what you want to happen and when? – Z.Quintana Nov 08 '18 at 07:58
based on this video: https://www.youtube.com/watch?v=jnvu1GpylP0 (at minutes 15.00 - 23.00) if i want to change my background color or make any custom with css, 1) i should install npm ---> 2) change value at file _variable.scss ($body-bg: #f8fafc; become $body-bg: #000;) ---> 3) put code to views file ---> 4) did npm run dev on cmd. But after try that step from video, my background color didn't change. It still white, i want to change it become black. – Hana Hae Nov 08 '18 at 08:54
I know this is a very simple solution but, have you tried clearing your browser's cache ?? Sorry for late reply btw! – Z.Quintana Nov 08 '18 at 11:14
1

It works :)) thank you~ I'm sorry for asking such a simple question. hehehe.. Have a good day!! – Hana Hae Nov 10 '18 at 00:29

score 0 · Answer 2 · answered Nov 08 '18 at 06:14

you dont have to run npm run serve or any npm command for this.

just add another css file for your custom css or you can direct include styles in your blade.

you can find a blade in layouts > app.blade.php and then just put your style before closing head (</head>) like that:

   .container{
        background-color: lightblue;
    }

</head>

thats it

How to change value appcss in laravel

2 Answers2