laravel spa 부트스트랩 템플릿 적용, fontawesome적용

1. css프레임워크의 bootstarp 무료 템플릿을 받는다. https://startbootstrap.com/

2. 다운로드 받은 파일의 압축을 풀고 index.html 파일을 열어준다. dist폴더의 index.html이다.

3. 아래처럼  index.html 파일의 영역소스를  component에 분리시켜 넣어준다. 

[분리된 파일]

Footer.vue

Header.vue

Siderbar.vue

4. 다운로드 받은 css/styles.css 파일을 내프로젝트 폴더의 public/css/styles.css 에 복사한다.

그리고 welcome.blade.php 파일에 링크시켜 놓자.

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

5. 브라우저에서 확인해보면 정상 출력이 되야한다.

컴포넌트가 모두 호출되었다.

6. 폰트 어썸을 설치하자

npm install --save-dev @fortawesome/fontawesome-free    

7. 빌드하기

npm run watch

8. app.scss 임포트하기

$fa-font-path :"../webfonts";
 
//fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';

아이콘이 적용되었다.