如何将 CSS 模块与 Typescript、React 和 Webpack 一起使用？答案

【问题标题】：How can you use CSS modules together with Typescript, React and Webpack?如何将 CSS 模块与 Typescript、React 和 Webpack 一起使用？
【发布时间】：2021-03-08 11:42:14
【问题描述】：

我只是在 React 上构建一个可重用的组件，因此我没有使用 react-create-app 构建并尝试从头开始配置所有内容。

我的问题是我不断收到以下错误： TS2307：找不到模块“./styles/styles.css”或其对应的类型声明。

目前代码很简单，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import styles from "./styles/styles.css";

const Calendar: React.FC = () => (
  <h1 className={styles.test}>

这是我的 webpack 配置：

const config: webpack.Configuration = {
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "typings-for-css-modules-loader",
            options: {
              modules: true,
              namedExport: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 4000,
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: "./src/**/*",
      },
    }),
  ],
};

我在这里缺少什么？据我研究，typings-for-css-modules-loader 是 css-loader 的直接替代品，它可以即时为 CSS 生成类型，所以 typeScript 应该不是问题？

这是我相关的开发依赖项：

>     "@babel/core": "^7.12.7",
>     "@babel/plugin-transform-runtime": "^7.12.1",
>     "@babel/preset-env": "^7.12.7",
>     "@babel/preset-react": "^7.12.7",
>     "@babel/preset-typescript": "^7.12.7",
>     "@babel/runtime": "^7.12.5",
>     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
>     "@types/react": "^17.0.0",
>     "@types/react-dom": "^17.0.0",
>     "@types/webpack": "^4.41.25",
>     "@types/webpack-dev-server": "^3.11.1",
>     "babel-loader": "^8.2.1",
>     "css-loader": "^5.0.1",
>     "fork-ts-checker-webpack-plugin": "^6.0.3",
>     "style-loader": "^2.0.0",
>     "ts-node": "^9.0.0",
>     "typescript": "^4.1.2",
>     "typings-for-css-modules-loader": "^1.7.0",
>     "webpack": "^5.6.0",
>     "webpack-cli": "^4.2.0",
>     "webpack-dev-server": "^3.11.0"

【问题讨论】：

你在运行 webpack 或 webpack 开发服务器时看到生成的类型了吗？
不，我没有看到它们生成。这就是为什么我认为这是一个配置问题......
你能提供最小的可重现 repo 或你的 package.json 文件吗？
我在上面添加了 package.json。谢谢
您是否已将您的组件包含在您的入口点中？我想这不是它不起作用的原因。我猜你会看到github.com/Jimdo/typings-for-css-modules-loader/issues/95 的问题：)

标签： css reactjs typescript webpack css-modules

【解决方案1】：

这是为我解决问题的配置：

     {
        test: /\.css$/i,
        use: [
          "style-loader",
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: { modules: true },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
  },

【讨论】：