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

Posted 2023-03-13

【中文标题】如何将 CSS 模块与 Typescript、React 和 Webpack 一起使用？

【英文标题】：How can you use CSS modules together with Typescript, React and 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 的问题：)

【参考方案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"],
  ,