4. webpack - SCSS 적용하기

1. 확장자 변경 

• 이전 포스팅에서 만들었던 CSS 폴더와 파일을 SCSS로 변경해준다. 
• 파일의 경우 확장자만 변경해주면 된다. 
• 기존의 main.js에 설정해놓은 CSS 파일의 경로도 수정해준다.
• 기존에 설정해놓은 webpack.config.js의 경로도 수정해준다. 

---

2. scss 패키지 설치

• 자바스크립트(webpack.config.js)에서 CSS를 읽고 적용할 수 있도록 style-loader와 css-loader를 설치하였다. 
• 이번에는 SCSS를 읽고 적용할 수 있도록, 필요한 패키지를 설치하고 적용해보자. 
• 터미널 입력:  npm i -D sass-loader sass
• 설치 후 webpack.config.js에 패키지 설정을 추가한다.

---

3. scss 작성하기 

• main.scss에 다음과 같은 코드를 작성하였다.

$color--black: #000;
$color--white: #fff;

body {
  background-color: $color--black;
  h1 {
    color: $color--white;
    font-size: 40px;
  }
}

---

4. SCSS 적용 확인하기

• 터미널 입력: npm run dev
• 작성한 SCSS가 잘 적용되는지 확인해보자.