소개

React를 사용할 때 css-loader에서 :local(.className) 또는 :local{...}로 선언하면 className이 해시되어 export됩니다.
이러한 모듈을 가져올 때 vscode (또는 다른 IDE) IntelliSense를 사용할 수 있다면 매우 유용하다고 생각합니다.
그 방법을 적어 둡니다.

방법

폴더 구성

+- demo-app/
   +- package.json
   +- tsconfig.json
   +- webpack.config.js
   +- html/
     +- index.html
   +- scripts/
     +- foo.tsx
   +- styles/
     +- foo.scss
     +- foo.scss.d.ts

css-loader 도입

할애합니다.
일단 webpack.config.js의 extensions 영역에 다음 확장자를 추가하는 것을 잊지 마십시오.

webpack.config.js

resolve: {
  extensions: [... ".sass", ".scss", ".css"]
}

스타일 작성

styles/foo.scss

// ここはGlobaｌ Style
* {
  color: royalblue;
}

// ここはScroped Style
:local {
  .bar {
    background-color: aquamarine;
  }
  .baz {
    font-size: 2em;
  }
}

스타일의 임시 도입

.d.ts를 만들지 않아도 ts 파일에서 아래 설명과 같이 require()를 사용하면 별도로 도입 할 수 없지만 TS 스타일이 아니므로 제대로 import 할 수 있도록 한다.

scripts/foo.tsx

const style = require('styles/foo')

형식 정의 파일 .d.ts 만들기

TS에 JS 파일을 도입할 때와 같이 ファイル名.d.ts 를 작성하면 OK.
기술 방법은 여기을 참고했다.

styles/foo.scss.d.ts

declare module '*.scss' {
  const content: {
    bar: string;
    baz: string;
  };
  export default content;
}

TS로 가져오기

scripts/foo.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import styles from 'styles/foo.scss' // 拡張子省略不可

const Hello: React.FC<{}> = props => (
  <div className={styles.bar}>Hello World!
  </div>
)

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello />,
    document.body.appendChild(document.createElement('div')),
  )
})

문제가 없으면 변수 styles를 호출 할 때 정의 된 클래스가 IntelliSense에 표시됩니다.

결과

결과는 이런 느낌이 든다





여기의 class명은 컴파일할 때마다 바뀐다.

주의점

위 foo.scss.d.ts를 작성하는 방법은 다음 구문으로만 읽을 수 있습니다.

import styles from 'styles/foo.scss'

아래 export default content를 수정하면 다른 쓰기로 가져올 수 있습니다.

declare module '*.scss' {
  const content: {
    bar: string;
    baz: string;
  };
- export default content;
+ export = content;
}

import * as styles from 'styles/foo.scss'
// または
import {foo, bar} from 'styles/foo.scss'

조금 스마트한 사용법

앞에서 설명한 방법이라면 하나 .scss 파일에 하나 .d.ts 파일을 만들어야 할 필요가 없기 때문에 스타일 파일이 많은 경우는 매우 보기 힘들다.styles/ 아래에 index.d.ts를 만들고 방금전 styles/foo.scss의 내용을 이동하면 된다고 생각한다.

styles/index.d.ts

declare module 'styles/foo.scss' {
  const content: {
    bar: string;
    baz: string;
  };
  export = content;
}

declare module 'styles/bar.scss' {
  const content: {
    baz: string;
  };
  export = content;
}

이렇게 기술하면 더 깨끗하게 정리된다고 생각합니다.

여담

rails의 webpacker를 사용할 때 디폴트는 js/ts파일만 watch하지만 아래의 설명을 config/application.rb에 추가하면 css파일(과 scss파일)도 watch해 준다.

config/application.rb

Webpacker::Compiler.watched_paths += %w(PATH/TO/STYLES/**/*.css PATH/TO/STYLES/**/*.scss)

자세한 사용법은 여기을 참조하십시오.

참고

htps : // 코 m / 누구 b ぇ ty po / ms / d3 a c5f15f2405f9 a c3fd
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 40382842 / 칸 t m 포 rt-c s- sc 모즈
htps : // m / rsc pt / ms / 56d2c15f76df50d 7