TypeScript에서 CSS 모듈 처리

3538 단어 css-modulesReactTypeScript
기존 JavaScript(React)의 TypeScript화를 추진 중인데 빠져서 필기를 합니다.

이벤트


CSS modules 섹션에서 fail
Foo/index.tsx
import React from 'react'
import styles from './index.css'

...

app/javascript/components/Foo/index.tsx:2:20 - error TS2307: モジュール './index.css' が見つかりません。

해결 방법


typed-css-modules와typings-for-css-modules-loader 등 패키지를 사용하는 방법도 있지만 전체적인 정의 파일을 준비해 시원하게 대응한다.
declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}
이상

참고 자료

  • reactjs - How to import CSS modules with Typescript, React and Webpack - Stack Overflow
  • How to use CSS Modules with TypeScript and webpack – Artem Sapegin – Medium
  • Quramy/typed-css-modules: Creates .d.ts files from css-modules .css files
  • Module build failed error · Issue #89 · Jimdo/typings-for-css-modules-loader
    • Leetcode#104. Maximum Depth of Binary Tree(이차 트리의 최대 깊이)
    LeetCode 101 [Symmetric Tree]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage