[ Laravel ] Css - BootStrap 적용하는 방법 ( link 없이 바로 적용 가능)

안녕하세요 상훈입니다.

Laravel(라라벨) 의 style을 Bootstrap 의 css로 자동 지정하게 하는 방법을 포스팅하겠습니다.

* 필요사항 : Npm, Composer, Laravel

1. 프로젝트 생성
2. 프로젝트 내로 이동
3. ui설치
4. Bootstrap으로 ui를 지정
5. npm install 를 통한 최신버전 설치
6. 확인(route + view + css 적용 확인)

 

 

1. 프로젝트 생성

$ composer create-project laravel/laravel 프로젝트이름

 

2. 프로젝트 내로 이동

$ cd 프로젝트 이름

 

3. ui 설치

$ composer require laravel/ui

 

4. Bootstrap으로 ui를 지정

$ php artisan ui bootstrap

 

5. npm install

$ npm install 

 

 

 

6. 확인(view + css 적용 확인 + route )

- view

새로운 view 파일 한개를 생성합니다.  저는 test.blade.php 로 하겠습니다.

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<input type="text" class="form-control">
<button class="btn btn-primary">save</button>

cdn을 따오는 것이 아닌 asset() 을 이용한 default css 경로 지정입니다.

 

- web.php

Route::get('/test', function () {
    return view('test');
});

 

7. LAST - 결과확인

$ php artisan serve
// 다른 bash
$ npm install & npm run watch

 

localhost:8000/test 로 접속하면,

결과 확인

 

css가 적용되어져 있는 것을 확인하실 수 있습니다.

 

이상입니다.

 

 

 

참고

Introduction

https://www.positronx.io/how-to-properly-install-and-use-bootstrap-in-laravel/