React+TS项目Sass CSS Modules类型生成与Webpack编译异常问题

搭建Sass+CSS-Modules+Webpack+React+TS项目时遇到以下问题：

• 切换VS Code的TypeScript版本为本地后，IDE能正确识别CSS类，但Webpack编译时无法识别这些类
• 始终未生成带*.d.ts后缀的Sass类型文件，已在tsconfig中添加typescript-plugin-css-modules插件，问题仍未解决

以下是项目配置代码：

Webpack配置 #

import { join } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
export const mode = "development";
export const entry = "./src/index.tsx";
export const devtool = "inline-source-map";
export const output = {
  path: join(__dirname, "/dist"),
  filename: "bundle.js",
};
export const devServer = {
  static: "./dist",
};
export const module = {
  strictExportPresence: true,
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: "babel-loader",
    },
    {
      test: /\.tsx?$/,
      use: "ts-loader",
      exclude: /node_modules/,
    },
    {
      test: /\.s[a|c]ss$/i,
      use: [
        { loader: "style-loader" },
        {
          loader: "css-loader",
          options: {
            minimize: true,
            camelCase: "dashes",
            modules: true,
            localIdentName: "[name]__[local]___[hash:base64:5]",
          },
        },
        {
          loader: "postcss-loader",
          options: {
            plugins: function () {
              return [require("autoprefixer")];
            },
          },
        },
        { loader: "sass-loader" },
      ],
    },
  ],
};
export const resolve = {
  extensions: [".tsx", ".ts", ".js"],
};
export const plugins = [
  new HtmlWebpackPlugin({
    template: "./index.html",
  }),
];

package.json #

{
  "name": "mma-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/jquery": "^3.5.16",
    "@types/node": "^16.18.23",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "axios": "^1.3.5",
    "babel-loader": "^9.1.2",
    "bootstrap": "^5.2.3",
    "css-loader": "^6.7.3",
    "css-modules-typescript-loader": "^4.0.1",
    "html-webpack-plugin": "^5.5.1",
    "jquery": "^3.6.4",
    "npm-watch": "^0.11.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "rollup-plugin-lit-css": "^4.0.1",
    "style-loader": "^3.3.2",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "typescript-plugin-css-modules": "^5.0.1",
    "web-vitals": "^2.1.4",
    "webpack": "^5.82.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  },
  "watch": {
    "build": {
      "patterns": [
        "src"
      ],
      "extensions": "js,jsx, ts, tsx, scss, sass, css"
    }
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "npm-watch && react-scripts start"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "babel-plugin-css-modules-transform": "^1.6.2",
    "babel-preset-env": "^1.7.0",
    "mini-css-extract-plugin": "^2.7.5",
    "node-sass": "^7.0.3",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "typed-scss-modules": "^7.1.0"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "checkJs": true,
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  },
  "include": ["src", "*.scss"]
}

内容的提问来源于stack exchange，提问作者Alex