我是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';
然后重新编译并尝试。