Typescript, React 및 Webpack을 사용하여 CSS 모듈을 Import하는 방법

Typescript, React 및 Webpack을 사용하여 CSS 모듈을 Import하는 방법

Typescript with Webpack에서 CSS 모듈을 Import하려면 어떻게 해야 합니까?

1. 자동 생성).d.tsCSS 파 c? 타이프 문자라고 하는 인 것을 하세요.import★★★★★★★★★★★★★★★★★★★★★★★★★★★★../styles.css.d.ts:

   import * as styles from './styles.css'
   

2. 를 사용한 require웹팩??

   let styles = require("./styles.css");
   

, 에서는 '마지막 접근법'을 .require★★★★★★ 。

CSS 파일 정의 및 클래스용 IntelliSense를 처리할 수 있는 최선의 접근법 또는 최선의 옵션은 무엇입니까?

에는 2021년, 2021년, ,src/Globals.d.ts다음과 같이 합니다.

declare module "*.module.css";
declare module "*.module.scss";
// and so on for whatever flavor of css you're using

그런 다음 설치 및

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

tsconfig로 이동합니다.

간단한 변경을 한 후 VS 코드에서 올바르게 기능하는 예(root는 스타일시트에 정의된 클래스입니다).

Webpack 및 tsc도 명령줄에서 올바르게 컴파일됩니다.

A) 말씀하신 것처럼 사용하기 쉬운 (최선이 아닌) 옵션이 하나 있습니다.

const css = require('./component.css')

• 오타가 요.require타이프 스크립트의 표준 기능이 아니기 때문입니다.

• 이 특정 요건을 위한 가장 간단한 입력은 다음과 같습니다.

  declare function require(name: string): string;
  

• 그러면 웹 팩이 타이프 스크립트를 컴파일하여 모듈을 올바르게 사용합니다.단, IDE 도움말이나 클래스명은 빌드를 체크하지 않습니다.

B) 표준 Import를 사용하는 더 나은 솔루션이 있습니다.

import * as css from './component.css'

• 풀 클래스 이름 IntelliSense 활성화
• 각파일에 합니다.그렇지 않으면 "css"는 "css"로 정의됩니다.그렇지 않으면tsc가 실패합니다.

적절한 IntelliSense를 위해 Webpack은 각 css 파일에 대한 유형 정의를 생성해야 합니다.

1. css-modules-loader에 대한 웹 팩 입력 사용

   webpackConfig.module.loaders: [
     { test: /\.css$/, loader: 'typings-for-css-modules?modules' }
     { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' }
   ];
   

2. 는 로더를 합니다.*.css.d.ts의 각

3. typescript 컴파일러는 css Import가 type string 속성(클래스 이름)을 가진 모듈임을 이해합니다.

「 」를 언급했습니다.typings-for-css-loader버그가 포함되어 있으며 파일 생성 지연이 있기 때문에 글로벌하게 선언하는 것이 가장 좋습니다.*.css의 *.css.d.ts파일이 아직 생성되지 않았습니다.

그 작은 버그 시나리오:

1. 파일 css를 .component.css
2. 컴포넌트에 import * as css from './component.css'
3. 실행합니다.webpack
4. Typescript 컴파일러가 코드(ERROR) 컴파일을 시도합니다.
5. 모듈 CSS」)을 합니다.component.css.d.ts가 새로운 단, 타이프스크립트 컴파일러가 새로운 타이핑파일을 찾는 것은 늦었습니다.
6. 실행합니다.webpack하다

은 글로벌: 「」 「」 「」 「」 「」).typings.d.tsCSS Import:

declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

이 정의는 생성된 css 파일이 없는 경우(새로운 css 파일을 추가한 경우 등)에 사용됩니다.그렇지 않으면 생성된 고유 파일이 사용됩니다(같은 폴더에 있어야 하며 소스 파일 + 확장자와 이름이 같아야 함).component.css.d.ts인텔리센스

의 예component.css.d.ts:

export const wrapper: string;
export const button: string;
export const link: string;

생성된 css 입력을 표시하지 않으려면 IDE에서 필터를 설정하여 소스 내의 확장자가 .css.d.ts인 모든 파일을 숨길 수 있습니다.

는 named i라름 named named named named named named라는 파일을 추가했습니다.Global.d.ts ★★★★★★★★★★★★★★★★★」typings.d.ts 나 my my my./src「 」 「 」 、 「 」

declare module "*.module.css";

웹 팩 css 구성:

{
  test: /\.css$/,
  use: [
    isProductionBuild ? MiniCssExtractPlugin.loader : "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: "[name]_[local]_[hash:base64]",
        sourceMap: true,
        minimize: true
      }
    }
  ]
},

모듈을 됩니다.import styles from "./App.module.css";

2022년만 추가하면 .Globals.d.tssrc 표시
함께

declare module "*.module.css";
declare module "*.module.scss";

다음으로 css 파일 또는 scss 파일에 대해 통상대로 CSS 모듈을 타이프 스크립트파일로 Import 할 수 있습니다.

import styles from "./Team.module.scss";

또는 웹 팩 요구 기능을 사용하여 가져오기

이것은 제가 하던 일이며, 아직도 제 프로젝트 중 몇 가지에 그 코드가 남아 있습니다.

---

지금 : typstyle : http://typestyle.github.io/ # / 라고 썼는데, 사용할 필요는 없습니다.그냥 그대로 있어const styles = require('./styles.css')그게 널 행복하게 해준다면 말이야FWIW http://typestyle.github.io/ #/raw 를 사용하는 경우는, 타입 스타일에 raw css 를 사용할 수도 있습니다.

이제 typescript는 import 'fileTobeImportedPath.css'를 실행하는 것만으로 css 파일을 Import할 수 있다고 생각합니다.

타이프 스크립트 해서 더하면 요.typings.d.ts다음과 같이 합니다.

declare module "*.module.css";
declare module "*.module.scss";

에는 일명을 name name를 .*.module.*형식을 지정합니다.

css-loader 는 다음 RegEx를 충족하는 이름의 파일에 대해 CSS 모듈을 자동으로 활성화합니다./\.module\.\w+$/i이 기능은, 설정에 의해서 커스터마이즈 할 수 있습니다.options.modules오젝오

예를 들어 다음과 같습니다.

import style from './App.module.css'; // CSS Module enabled
import './index.css'; // Plain CSS loaded

에서는 이 을 에 할 수 .webpack.config.js:

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[hash:base64]", // default
          auto: true // default
        },
        sourceMap: true
      }
    },
  ]
},

커스텀 설정 예:

{
  loader: "css-loader",
  options: {
    modules: {
      localIdentName: "[name]_[local]_[hash:base64]", // custom class name format
      auto: /\.cmod\.\w+$/i, // custom auto enable CSS Module for "*.cmod.css" format
    },
  }
},

완전한 문서는 이쪽입니다.

용 i i i i를 쓴다.create-react-app잘 되지 것 뭔가 부족한 것 같아요VS Code인 「」를 합니다.TypeScript★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★create-react-app&VS Code고객님께도 도움이 될 것입니다.

1. 려려를 npm i typescript-plugin-css-modules --save-dev
2. 폴더에 .styles.d.ts

styles.d.ts

// if you use css
declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

// if you use scss
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

// if you use less
declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

3. .timeoutode/timeout.json (아직 파일이 없는 경우 파일을 만듭니다) - 다음 필드를 추가합니다.

.syslogode/syson.json

"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true

따라서 파일은 다음과 같이 표시될 수 있습니다.

.syslogode/syson.json

{
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
}

let styles = require("./styles.css");es5의 입니다.import * as styles from './styles.css'svascript 입니다.

언급URL : https://stackoverflow.com/questions/41336858/how-to-import-css-modules-with-typescript-react-and-webpack