Laravel Mixで基本色や背景色を変更する方法
Laravel Mixではデフォルトの背景色が、"#f8fafc"という微妙な青白(?)になっています。
この背景色を変更したり、基本色を変更する方法を説明します
背景色の変更
|– app
|– bootstrap
|– config
|– database
|– public
|– resources
|– sass
|– _variables.scss ← これ
|– routes
|– storage
|– tests
resources -> sass -> _variables.scssを開きます
// Body
$body-bg: #f8fafc;
// 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;
背景色は$body-bgにあたりますので、その部分の色を変更します
コンパイル
CSSの変更が発生したので、コンパイルを実行し直す必要があります
$ npm run production
ターミナルを開いてコマンドを実行します
ファイルのアップロード
|– app
|– bootstrap
|– config
|– database
|– public
|– css
|– app.css ← これ
|– resources
|– routes
|– storage
|– tests
あとはコンパイルされたファイルをアップロードします
public -> css -> app.cssをアップロードしましょう
ブラウザをスーパーリロードすれば変更が反映されているはずです
Bootstrapをカスタマイズ
フロントのCSSにBootstrapを使う場合、その色なんかをカスタマイズする場合でも_variables.scssを編集します
その場合の具体的な指定方法はこちらのGithubを参照するとわかりやすいです
基本色
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
例えば基本色を変更したい場合、このbrand-○○を指定してやることでbtn-infoのような基本カラーにすべて反映されます
ディスカッション
コメント一覧
まだ、コメントがありません
みんながLoadingしてる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか