VUEJS Laravel Sass 연동하기

개발환경

• laravel
• vue.js 
• sass

---

안녕하세요 오랫만에 글을 쓰는거같아요! 이번에는 라라벨/뷰에서 sass를 연동해보았습니다.

 

 

먼저 resources/sass 디렉토리가 있는지 확인합니다. 

저는 없어서 만들어야했어요 처음엔 그냥 수기로 만들려다가 이건 좀 아닌거같아서 구글링 해보았습니다.

 

composer require laravel/ui --dev
php artisan ui vue

코드를 다음과 같이 입력하면 이렇게 디렉토리가 생기는걸 볼수있어요!

 

그리고 webpack.mix.js 를 확인해보니

코드가 이렇게 바껴있는걸 볼 수있었어요

여러개의 Sass 파일을 대응하는 css 파일로 컴파일 할 수있으며, CSS 결과 파일의 위치를 커스텀마이징 할 수있대요!

 

그리고 만들어진 app.scss 파일을 볼게요

여기서 제가 추가하고싶은 파일 만들어서 추가하면 자동으로 컴파일 되는거같아요!

 

적용하려면 아래 코드 실행해주기!

npm run dev

 

저도 알아보면서 적는중이라 정확하지않을 수도있고 또 새로운거 알아낸대로 수정하거나 포스팅을 새로 하겠습니다! 

혹시 저보다 잘 아시는분이 보신다면 댓글로 알려주세요 감사합니다 🙇🏻‍♀️