1. 소개
2. 웹팩 설정
3. 타입스크립트 파일 수정
4. CSS 파일 생성
5. 결론

1. 소개

타입스크립트와 CSS를 함께 사용하는 웹 프로젝트를 작업할 때, 웹팩을 통해 CSS 파일을 타입스크립트에 적용하는 것이 일반적입니다. 이 포스트에서는 웹팩을 사용하여 타입스크립트에 CSS를 적용하는 방법을 살펴보겠습니다.

2. 웹팩 설정

가장 먼저, 웹팩 설정 파일에 CSS 파일을 해석할 수 있는 로더를 추가해야 합니다. style-loader와 css-loader를 설치하고 webpack.config.js 파일에 아래와 같이 설정을 추가합니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

3. 타입스크립트 파일 수정

타입스크립트 파일에서 CSS 파일을 import 할 수 있도록 수정해야 합니다. 아래와 같이 수정합니다.

import './styles.css';

// ... 이하 생략

4. CSS 파일 생성

타입스크립트 파일에서 import한 CSS 파일을 생성합니다. styles.css 파일을 생성하고 원하는 스타일을 작성합니다.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

5. 결론

웹팩을 통해 타입스크립트 파일에서 CSS 파일을 적용하는 방법을 살펴보았습니다. 이를 통해 프로젝트에서 타입스크립트와 CSS를 함께 사용할 수 있게 되었습니다.

본 포스트는 웹팩 공식 문서를 참고하여 작성되었습니다.