It doesn't work with path-alias

[Yegorich555]

The following code demonstrates the issue

/* ./src/styles/shared.scss */
.btn {
  font: inherit;
}

// ./src/elements/buttons/button.tsx
import shared from "@/styles/shared.scss";

export default function Button() {
  // css-modules plugin shows error here: `Class or exported property 'btn' not found`
  return (
    <button className={shared.btn}> 
      Test Buttton
    </button>
  );
}

// ./eslintrc.js
/** @type {import("eslint").Linter.Config} */
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:css-modules/recommended", // shows unused classes: https://www.npmjs.com/package/eslint-plugin-css-modules
  ],
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  plugins: ["json", "prettier", "import", "@typescript-eslint", "unused-imports", "css-modules"],
  rules: {
    "css-modules/no-unused-class": "warn",
    "css-modules/no-undef-class": ["error"],
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      },
    ],
  },
  settings: {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    "import/resolver": {
      typescript: {
        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
        project: ["./tsconfig.json"],
      },
    },
  },
};

// ./tsconfig.json
{
  // jsconfig.json === tsconfig.json with allowJs: true
  "compilerOptions": {
    //intellisense config for VSCode
    "baseUrl": "./",
    "paths": {
      //none-js-ts files is not supported by intellisense. Use 'path-intellisense.mappings' in .vscode/settings.json instead
      //this is should be sync with aliases in webpack
      "@/*": ["src/*"],
      "images/*": ["src/assets/images/*"],
      "fonts/*": ["src/assets/fonts/*"]
    },
    "jsx": "react-jsx",
    "allowJs": true,
    "outDir": "",
    "noEmit": true, // exclude errors in console because it should be wrapped by webpack
    "esModuleInterop": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "files": ["src/main.tsx"],
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build", ".vscode"]
}

According to pointed config ESlint + TS understands path-alias @/ as root of the project. But the css-modules don't understand it and the plugin shows error: Class or exported property 'btn' not found The issue can be resolved by changing import shared from "@/styles/shared.scss"; to import shared from "./src/styles/shared.scss";

But how to tie the TS-path alias with the current plugin ?