Laravel/uiを用いた場合のapp.scssの使い方

Laravel中のsassとコンパイル

laravel/uiでvue.jsを導入するとresources以下にsassというフォルダが追加されます。
sassフォルダ以下にはapp.scssと_variables.scssがあります。

Laravelのasset関数で読み込まれるcssファイルのurlはpublic/css/app.cssなのですが、
そこで書かれているcssはこのsassがコンパイルされた内容になります。
もしpublic/css/app.cssを直接変更していた場合はコンパイルの際に内容ごと上書きされてしまいます。

コンパイルはwebpack（npm run dev等で動作しているソフト）で行われます。
webpackは他にもrequireしたファイルやapp.js等もpublic以下のフォルダに展開してくれます。

コンパイルの設定を行うLaravel Mix

Laravelでは、webpackでコンパイルするファイルやコンパイル先の設定を、Laravel Mixで行います。
LaravelMixの設定をするwebpack.mix.jsではscssが指定されています。

Laravel Mixの詳細な設定は、作成したプロジェクトのルートフォルダ直下にある、laravel.mix.jsというファイルを通して行います。

laravel.mix.js

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

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

//"php artisan ui react" を実行するとreactとsassの設定をし、reactとsassのコンパイル設定を行う。
//"php artisan ui vue"ならば、mix.reactの部分がmix.vueになる。 
mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

LaravelMixを用いて、様々な形式のファイルをwebpackでコンパイルできます。
詳細な設定はドキュメントを参照してください。
https://readouble.com/laravel/5.5/ja/mix.html

app.scssの構造

app.scssのファイル中では
bootstrapやfont、変数のファイルを読み込んでいます。

app.scss

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

// Variables
@import 'variables';

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

もしコンパイルされたcssをasset等で読み込んでいた場合、
scssではコメントアウトができるので、
bootstrapを読み込んでいる部分（３つ目のimport)をコメントアウトしコンパイルすれば
bootstrapの設定が無効にすることができます。

上から２番目のimport variablesでは
変数を読み込んでいます。
_variables.scssでは予め、
色や文字の設定用の変数を規定してくれています。

_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;

使用例：

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';

.write-points {
    background-color: $red;
}