没有改变背景颜色的laravel混合



我是Laravel的新学习者,第一次安装Laravel mix。node.js安装和一切,但当我想改变背景颜色没有影响我的页面。以下是我的代码:

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', [
        //
    ]);
我已经创建了scss文件夹和。scss文件:

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;

我还添加了在app.blade.php:

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

我禁用了Chrome中所有安装的扩展。我现在已经清除控制台没有错误,并删除MDB引导。

你需要实际导入Bootstrap的函数,变量&Mixins文件以进行覆盖工作。试试这样做:

 // 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';

然后重新编译并尝试。