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

Question

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

1. 为CSS生成（或自动生成）.d.ts文件？并使用经典的Typescript import声明？使用./styles.css.d.ts： import * as styles from './styles.css'
2. 使用require Webpack函数导入？ 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文件生成*.css.d.ts文件
3. Typescript编译器将理解css import将是具有string类型的属性（类名）的模块。

提到typings-for-css-loader包含a bug，并且由于类型文件生成延迟，如果我们的*.css文件尚未生成，最好声明全局*.css.d.ts类型。

那little bug场景：

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

我已将一个名为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 3

或使用require webpack函数导入

这就是我过去常做的事情，并且在我的一些项目中仍然有代码。

---

现在：我写了typestyle：http://typestyle.github.io/#/，但你不必使用它。如果它让你开心，只要坚持使用const styles = require('./styles.css')。如果你想要http://typestyle.github.io/#/raw，你还可以使用带有typestyle的原始css

Answer 4

qazxsw poi是最好的方法，因为它是es5版本的javascript，它与react.qazxsw poi的每个功能都兼容，是es6版本的javascript。