如何使用 Webpack 在 Typescript 中导入 CSS 模块？
.d.ts为 CSS生成（或自动生成）文件？并使用经典的 Typescriptimport语句？与./styles.css.d.ts：
import * as styles from './styles.css'
使用requireWebpack 功能导入？
let styles = require("./styles.css");
但是对于最后一种方法，我必须定义require函数。
什么是最好的方法或最佳选择，并且还可以为 CSS 文件定义和类处理 IntelliSense？
A）正如您所说，使用require有一个最简单（不是最好）的选项：
const css = require('./component.css')
require因为它不是打字稿中的标准功能。这个特定要求的最简单的输入可能是：
declare function require(name: string): string;
然后，Webpack 将编译 typescript 并正确使用模块 -但没有任何 IDE 帮助和类名检查 build。
B）使用标准导入有更好的解决方案：
import * as css from './component.css'
tsc编译器将失败对于正确的 IntelliSense，Webpack 需要为每个 css 文件生成类型定义：
使用 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' }
];
Loader 将为*.css.d.ts代码库中的每个 css 文件生成文件
提到的typings-for-css-loader包含一个错误，并且由于类型文件生成延迟，最好声明全局*.css类型以防我们的*.css.d.ts文件尚未生成。
那个小错误场景：
component.cssimport * as css from './component.css'webpackcomponent.css.d.ts)，但 typescript 编译器找到新类型文件为时已晚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 的文件。
现在在 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 代码中正确运行的示例（根是我的样式表中定义的类）：
Webpack 和 tsc 也可以在命令行上正确编译。
我添加了一个名为Global.d.tsortypings.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";
或者使用 require webpack 功能导入
这正是我过去所做的，并且在我的一些项目中仍然有该代码。
现在：我写了 typestyle：http ://typestyle.github.io/#/但你不必使用它。const styles = require('./styles.css')如果它让你快乐，就坚持下去。FWIW，如果你想要http://typestyle.github.io/#/raw ，你也可以使用带有 typestyle 的原始 css
我认为现在打字稿可以通过简单地导入 css 文件 import 'fileTobeImportedPath.css'
本案例与 Typescript 有关。您可以typings.d.ts在项目中添加以下内容：
declare module "*.module.css";
declare module "*.module.scss";
*.module.*如果要启用 CSS 模块，最好使用带有格式的文件名。
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
},
}
},
完整的文档在这里。
在 2022 年，我只需要在文件夹
下添加Globals.d.ts文件src
declare module "*.module.css";
declare module "*.module.scss";
然后我可以像往常一样在我的 typescript 文件中导入 CSS 模块来导入 css 或 scss 文件：
import styles from "./Team.module.scss";
let styles = require("./styles.css");是最好的方法，因为它是 es5 版本的 javascript，它与 react 的每个功能都兼容。import * as styles from './styles.css'是 es6 版本的 javascript。