- 먼저 webpack.mix.js를 손봐준다.
.postCss('resources/css/app.css', 'public/css');를 추가해
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.
|
*/
mix.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', 'public/css');
가 된다.
당연히,
'resources/css/app.css' directory에 파일을 생성 해야 된다.
- react component 불러 올 blade 파일을 손봐준다.
<link href="{{ mix('css/app.css') }}" rel="stylesheet">를<head>tag 사이에 넣어준다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="example"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>여기서 asset(), 대시 mix()를 쓰는 이유는 단순하게 우리가 webpack.mix.js 손봐서 거기서 정의한 경로를 쓰겠다는 것 이다.
벨로그에 생각을 임시로 저장합니다. 틀린건 틀렸다고 해주세요 :) 그래야 논리 학습이 강화됩니다.