Parcel에서 CSS 모듈을 사용하는 방법
Parcel은 간단하고 효율적인 웹 애플리케이션 번들러입니다. Parcel을 사용하여 CSS 모듈을 사용하려면 몇 가지 단계를 따라야 합니다. 이 문서에서는 Parcel에서 CSS 모듈을 사용하는 방법을 설명합니다.
1. Parcel 프로젝트 설정
먼저, Parcel 프로젝트를 설정해야 합니다. package.json 파일이 있는 프로젝트 디렉토리에서 다음 명령을 실행하여 Parcel을 설치합니다.
npm install parcel --save-dev
또는 yarn을 사용하는 경우,
yarn add parcel --dev
2. CSS 모듈 사용하기
Parcel에서 CSS 모듈을 사용하려면 CSS 파일에 특정한 형식으로 클래스 이름을 작성해야 합니다. 클래스 이름에는 모듈화된 스타일을 적용할 요소의 고유한 이름을 포함해야 합니다.
예를 들어, MyComponent라는 컴포넌트를 스타일링하는 CSS를 작성하는 경우 아래와 같이 클래스 이름을 작성할 수 있습니다.
/* styles.css */
.myComponent {
background-color: yellow;
}
.myComponent h1 {
color: blue;
}
3. JavaScript 파일에서 CSS 모듈 불러오기
CSS 모듈을 사용하기 위해 JavaScript 파일에서 CSS 파일을 불러와야 합니다. 이렇게 하려면 JavaScript 파일에서 import 구문을 사용하여 CSS 파일을 가져와야 합니다.
import styles from './styles.css';
위 코드에서 styles는 CSS 클래스 이름을 객체로 나타내는 것입니다. 예를 들어, styles.myComponent는 CSS 클래스 .myComponent에 대한 객체입니다.
4. CSS 모듈 사용하기
이제 JavaScript 파일에서 CSS 모듈을 사용할 수 있습니다. 다음과 같이 요소에 클래스 이름을 적용하여 CSS 모듈을 사용할 수 있습니다.
import styles from './styles.css';
const myElement = document.createElement('div');
myElement.classList.add(styles.myComponent);
document.body.appendChild(myElement);
위 코드에서는 myComponent 클래스를 요소에 추가하여 해당 요소에 CSS 스타일을 적용합니다. 이제 Parcel을 실행하면 CSS 모듈이 작동하는 것을 확인할 수 있습니다.