CODEWITHSUNDEEP
node.jslaravel
konstantinosiakovou
konstantinosiakovou

Reputation: 15

Not changing the backround color with laravel mix

I am new learner with Laravel and for the first time i have installed laravel mix. The node.js is installed and everything but when i want to change the backround color there is no effect on my page. Here are my codes:

webpack.mix.js:

const mix = require('laravel-mix');
mix.disableNotifications();



/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css', [
        //
    ]);

I have created the scss folder and the .scss files:

app.scss

 // Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

_variables.acss:

// Body
$body-bg: #ff0000;

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

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

Also i have added at app.blade.php:

<link rel="stylesheet" href="{{asset('css/app.css')}}">

Upvotes: 0

Views: 271

Answers (2)

konstantinosiakovou
konstantinosiakovou

Reputation: 15

I disabled all installed extensions in Chrome - works for me. I have now clear console without errors and remove MDB bootstrap.

Upvotes: 1

Siddharth Bhansali
Siddharth Bhansali

Reputation: 2492

You'd need to actually import Bootstrap's functions, variables & mixins file to have the overwrite work. Try doing this:

 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');

 @import "~bootstrap/scss/functions";

 // Variables
 @import 'variables';

 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

 // Bootstrap
 @import '~bootstrap/scss/bootstrap';

Then re-compile and try.

Upvotes: 0

Related Questions