Setup modules with Sass + CSS-Modules + Webpack + React + Ts

Question

I have a trouble with getting types from my .scss files. I'm searching and trying to implement different configurations but nothing help.

Basically, I'm trying to use modules in react app with TS.

This is my 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",
  }),
];

this is 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"
  }
}

and this is tsconfig

{
  "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
  },
  "include": ["src", "*.scss"]
}

And nothing is work. Packages for scss with *.d.ts extension doesn't create

UPD: Ok, in vs code I've change my typescript version to local and it's start to show me css classes and implement them correctly. But for now they are not compiled and webpack doesn't see them.

I've add this lines to tsconfig

...,
"plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]

Answer 1

You are configuring typescript to not emit declaration files by setting "noEmit": true,

Change it to emitDeclarationOnly: true

This will allow Ts-loader which runs before babel loader to emit declaration files only and not transpile Ts code.

Babel loader will take the responsibility from this point.