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

Question

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

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

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

1. 使用 require Webpack 功能导入？

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

但是对于最后一种方法，我必须定义 require 函数。

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

原文由 Diego Laciar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Matt Wonlaw 发布，翻译遵循 CC BY-SA 4.0 许可协议