728x90
오늘은 라라벨 설치부터 vite 사용하는 법까지
1. 원래는public이 기본 하위 디렉터리라 public 폴더 안에 js, css를 넣는 것이 맞다 (이럴경우 asset{{ }} 사용)
2. vite나 laravel mix를 통해 public, asset{{ }}없이 resources에서 사용할 수 있다 npm으로 설치
index.blade.php
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
@vite(['resources/css/index.css'])
</body>
</html>
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/index.css',
'resources/images/background.jpg',
'resources/js/app.js'
],
refresh: true,
}),
],
});
index.css
body{
margin:0; /* 원래 기본 background는 margin이 8이다. */
background-image: url("/images/background.jpg");
background-repeat: no-repeat; /* 공간채우기위해 여러개 들어가는 것을 금지, 한개만 */
background-size: cover; /* cover는 검색해보기 */
/* background-color: red; */
}
728x90