How to change value appcss in laravel

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 :))

2 answers

  • answered 2018-11-08 06:05 Z.Quintana

    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!

  • answered 2018-11-08 06:14 Emtiaz Zahid

    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