Laravel에서의sass와 컴파일

laravel/ui 중 vue.js를 가져오면 리소스 아래에sass라는 폴더를 추가합니다.
sass 폴더 다음은 앱입니다.scss와_variables.scss가 있습니다.

Laravel의 asset 함수로 읽은 css 파일의 URL은public/css/app입니다.css
거기에 쓴 css는 이sass가 컴파일한 내용입니다.
public/css/appcss를 직접 변경하면 컴파일할 때 내용에 따라 덮어씁니다.

웹 팩(npmrun dev 등 실행 소프트웨어)을 통해 컴파일합니다.
웹팩에는 또 다른require 파일과 앱이 있습니다.js 등도public 이하의 폴더로 확장됩니다.

컴파일 구성을 위한 Laravel Mix

Laravel에서, LaravelMix에서 웹 팩에서 컴파일할 파일과 컴파일 목표를 설정합니다.
LaravelMix의 웹 팩을 설정합니다.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를 사용하면 웹 팩으로 다양한 형식의 파일을 컴파일할 수 있습니다.
자세한 설정은 문서를 참조하십시오.
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';

하면, 만약, 만약...
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;
}