Vue SCSS 연동 및 SCSS boilerplate 설정하기

🎉 SASS 연동하기

브랜치: common-setup

🎉 TODO

1. 프로젝트 초기 설정

   • sass-loader 설치 및 연동
     : 참고한 블로그 링크
     : vue-loader 공식 문서

   • 사이트 참고해서 프로젝트 초기 CSS 파일(폴더) 생성

   • SCSS 구조와 @import

2. 뷰 라우터 설치

   • 뷰 라우터 설치 및 연결(Vue 3버전)

   • 메인 페이지(컴포넌트) 생성

🎉 TIL

1. ✨ 프로젝트에 scss(sass) 적용하기

• node-sass, sass-loader 설치

#shell
npm install --save node-sass
npm install --save sass-loader

• node-sass 설치 중에 발생한 에러

: npm install --save node-sass 명령어를 실행한 뒤 에러가 발생했다. 에러 내용 참조
: 간단하게 해결했다. 현재 node 버전이 10.16 버전이었는데 nvm을 통해서 14.16 버전을 설치하고 사용하니 잘 설치되었다..

• sass-loader 설치 중에 발생한 에러

: node-sass, sass-loader 설치 후, scss 소스를 적용했는데

Syntax Error: TypeError: this.getOptions is not a function 라는 에러가 발생했다.
찾아보니 sass-loader의 버전(11 버전)이 맞지 않아서 생기는 문제였고, 10 버전을 다시 설치했다. 참고 링크

#shell
npm uninstall sass-loader

npm install --save sass-loader@10

2. ✨ 프로젝트에 SCSS Boilerplate 구조 설정하기

• 폴더 구조
  

• 참고

3. ✨ 전역으로 사용할 .css 파일 import 하기

: vue.config.js 파일에 다음 소스를 추가한다.
: sass-loader 8 버전 대는 prependData를 사용해야한다. 그 이상 버전은 additionalData
: ✨ 이렇게 작성한 코드는 모든 컴포넌트에 스타일이 적용된다! => 따라서, 컴포넌트 갯수만큼 실행된다.
(2022.01.03) 모든 .vue 파일의 스타일 태그에 해당 내용을 적용한다.

// vue.config.js
module.exports = {
	devServer: {
	  overlay: false,
	},

	css: {
	  loaderOptions: {
	    sass: {
		additionalData: `
		    @import "@/assets/scss/common.scss";
		    @import "@/assets/scss/variables.scss";
		    `,
	     },
	   },
	},
};