[typescript] 웹팩으로 타입스크립트와 CSS Modules 연동하기

11 Dec 2023

typescript

웹팩을 사용하면 타입스크립트와 CSS Modules를 함께 사용할 수 있습니다. 이를 통해 모듈화된 CSS를 타입스크립트와 함께 사용하여 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

1. 웹팩 설정 파일 생성

먼저 프로젝트 폴더에 webpack.config.js 파일을 생성합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  // ... 기존 웹팩 설정
  module: {
    rules: [
      // ... 기존 로더 설정
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
};

위 설정에서 ts-loader는 타입스크립트 파일을 로드하고, css-loader는 CSS 파일을 모듈화하여 처리합니다.

2. 타입스크립트 및 CSS 파일 작성

프로젝트에 타입스크립트 및 CSS Modules를 사용하여 파일을 작성합니다.

// app.ts
import styles from './styles.css';

const element = document.createElement('div');
element.innerHTML = 'Hello, CSS Modules!';
element.classList.add(styles.myClass);
document.body.appendChild(element);

/* styles.css */
.myClass {
  color: red;
}

3. 웹팩 빌드 실행

터미널에서 웹팩을 실행하여 빌드를 수행합니다.

npx webpack

위 명령어를 실행하면 타입스크립트와 CSS Modules가 함께 번들링되어 dist 폴더에 결과물이 생성됩니다.

이제 웹팩을 통해 타입스크립트와 CSS Modules를 성공적으로 연동하여 사용할 수 있습니다.

참고 자료: Webpack 공식 문서, TypeScript Handbook

md내부링크1