SCSS

이번에는 프로젝트에 SCSS 파일을 연결해보는 방법에 대해 살펴봅시다. 참고로 이전 글에서 css 파일을 적용하는 법과 연장선 상에 있는 내용이므로 module 글을 참고하는 것을 추천드립니다.

1. 루트 경로

루트 경로에 SCSS 폴더를 생성합니다.

1.1 main.scss 파일 생성

루트 경로에 SCSS 폴더를 만들고 그 안에 main.scss 파일을 생성해줍니다.

1.2 main.js import

import '../scss/main.scss'

main.js에 import 키워드를 통해 SCSS 파일을 가져옵니다.

1.3 외부 패키지 설치

그러나 webpack은 SCSS 파일을 읽을 수 없으므로 문제가 발생하게 됩니다. 이를 해결하기 위해서 외부의 패키지를 설치해야 합니다.

$ npm i -D css-loader style-loader // css 파일 관련 패키지
$ npm i -D sass-loader sass // scss 파일 관련 패키지

1.4 module 옵션 추가

module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

이전 글에서와 마찬가지로 webpack.config.js 파일에 module 옵션을 추가해서 위 내용을 코딩해줍니다.

다만, test에 사용한 정규표현식인 /\.css$/는 css 파일을 읽기 때문에 그 앞에 s?를 붙여 s로 시작하거나 그렇지 않아도 된다는 의미를 부여하여 /\.s?css$/를 입력해줍니다. 정규표현식에 대한 간단한 내용은 여기에서 참고해주시면 됩니다.

그리고 use 태그에는 이전 포스트에서 다룬 css 파일을 가져오는 패키지인 style-loader, css-loader에 추가적으로 설치한 패키지인 sass-loader를 입력해주시면 됩니다.

1.5 개발 서버 오픈

npm run dev로 개발 서버를 열고 확인하면, 프로젝트에 SCSS 파일에 입력한 스타일이 잘 적용된 것을 볼 수 있습니다.