Laravel Mixで基本色や背景色を変更する方法

2020年7月29日Laravel

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のような基本カラーにすべて反映されます

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか？
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談（ヒアリング）するだけで3,000円分のamazonギフト券がもらえます！
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件（100万円超え）が多数あります

詳しくはこちら