[javascript] Parcel에서 SASS/SCSS를 사용하는 방법은?

22 Nov 2023

Parcel은 간단하고 편리한 웹 애플리케이션 번들러입니다. SASS/SCSS는 CSS 전처리기로서, 더 강력한 기능과 유지 보수성을 제공합니다. Parcel과 함께 SASS/SCSS를 사용하기 위해 몇 가지 단계를 따라야 합니다.

먼저, 프로젝트 루트 디렉토리에서 터미널을 엽니다. SASS/SCSS를 사용하려면 해당 패키지를 먼저 설치해야 합니다. 아래 명령을 실행하여 필요한 패키지를 설치합니다.

npm install node-sass

이제 프로젝트에 SASS/SCSS 파일을 만들어봅시다. 예를 들어, styles.scss라는 파일을 생성합니다.

프로젝트의 엔트리 파일(일반적으로 index.js 또는 main.js)에서 SASS/SCSS 파일을 import 해야 합니다. 아래 코드를 엔트리 파일에 추가합니다.

import './styles.scss';

이제 Parcel을 실행하여 번들링을 수행합니다. 터미널에 다음 명령을 입력합니다.

npx parcel index.html

이제 Parcel은 SASS/SCSS 파일을 처리하고 CSS로 변환하여 번들링합니다. 생성된 CSS 파일은 dist 디렉토리에 저장됩니다.

컴파일된 CSS를 HTML 파일에서 사용하려면, 해당 HTML 파일에서 CSS 파일을 import 해야 합니다. 예를 들어, index.html 파일에 다음 코드를 추가합니다.

<link rel="stylesheet" href="./styles.css">

이제 SASS/SCSS 파일을 수정하면 Parcel이 자동으로 변경 사항을 감지하여 다시 번들링합니다. 변경된 CSS가 자동으로 적용되므로 개발 프로세스가 훨씬 편리해집니다.

Parcel을 사용하여 SASS/SCSS 파일을 번들링하는 방법을 알아보았습니다. 이렇게 설정하면 효율적인 웹 프로젝트 개발에 도움이 되며, SASS/SCSS의 강력한 기능을 활용할 수 있습니다.

참고 자료: