如何使用Typescript,React和Webpack导入CSS模块

Question

如何使用Webpack在Typescript中导入CSS模块？

1. .d.ts为CSS 生成(或自动生成)文件？并使用经典的Typescript import语句？用./styles.css.d.ts:

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

2. 使用requireWebpack功能导入？

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

但对于最后一种方法,我必须定义require函数.

什么是最佳方法或最佳选择,还可以处理CSS文件定义和类的IntelliSense？

Answer 1

A)正如您所说,有一个最简单(不是最好)的选项可以使用require:

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

• 我们需要有require打字,因为它不是打字稿中的标准功能.

• 针对此特定要求的最简单类型可能是:

  declare function require(name: string): string;
  

• 然后Webpack将编译typescript并正确使用模块 - 但没有任何IDE帮助和类名检查构建.

B)使用标准导入有更好的解决方案:

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

• 启用完整的类名IntelliSense
• 需要为每个css文件定义类型,否则tsc编译器将失败

为了正确的IntelliSense,Webpack需要为每个css文件生成类型定义:

1. 使用webpack typings -for-css-modules-loader

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

2. Loader将为*.css.d.ts您的代码库中的每个css文件生成文件

3. Typescript编译器将理解css import将是具有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. Loader将生成Css模块类型文件(component.css.d.ts),但是打字稿编译器找到新的打字文件已经晚了
6. webpack再次运行将修复构建错误.

简单的解决方法是创建全局定义(例如typings.d.ts,在源根目录中调用的文件)以导入CSS模块:

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

如果没有生成css文件(例如,您添加了新的css文件),将使用此定义.否则将使用生成的特定(需要在同一文件夹中并命名为与源文件+ .d.ts扩展名相同),例如.component.css.d.ts定义和IntelliSense将完美地工作.

示例component.css.d.ts:

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

如果您不想看到生成的css类型,您可以在IDE中设置过滤器以隐藏源中扩展名为.css.d.ts的所有文件.

Answer 2

在 2022 年，我所需要做的就是在文件夹 下添加Globals.d.ts文件src

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

然后我可以像平常的 css 或 scss 文件一样在我的 typescript 文件中导入 CSS 模块：

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

Answer 3

现在到了 2021 年，您需要做的就是src/Globals.d.ts使用以下几行将 a 添加到您的项目中：

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 也可以在命令行上正确编译。

Answer 4

我已经使用一些类型定义将名为Global.d.ts或的文件添加typings.d.ts到了我的./src文件夹中：

declare module "*.module.css";

Webpack 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";

Answer 5

let styles = require("./styles.css");是最好的方法，因为它是 es5 版本的 javascript，与 React 的每个功能兼容。import * as styles from './styles.css'是es6版本的javascript。