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

Question

我只是在 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"

Answer 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"],
  },

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

How can you use CSS modules together with Typescript, React and Webpack?

css

typescript

reactjs

webpack

css-modules