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

小能豆

javascript

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

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

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

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

什么是最佳方法或最佳选项，以及是否可以处理 CSS 文件定义和类的 IntelliSense？

阅读 61

2024-06-12

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

2024-06-12