TypeScript：如何支持Intellisense从compilerOptions.paths导入带有别名路径的CSS文件？

Question

基本上如标题所示。我希望能够使用智能感知导入 CSS 文件，其中其路径包含我由 tsconfig.json 的

compilerOptions.paths

定义的别名之一。有谁知道如何实现这一目标？

例如，

import * as styles from '@mystyles/somestyle.module.css'

在输入

@mystyles

的过程中，它应该已经在完成菜单中显示了

somestyle.module.css

。目前还没有。

和 tsconfig.json：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@mystyles/*": [ "src/reactApp/styles/*" ],
    },
  },
  "include": [
    "src/**/*",
    "public/**/*"
  ],
}

Answer 1

首先，我比任何人都了解你。那么让我来解决你的问题吧。

1. 你正在写 JS。要使 tsconfig.json 影响这些 JS 文件，您必须在 tsconfig.json 中设置

   checkJs: true

   。
2. TypeScript 默认情况下对扩展名一无所知

   .css

   。所以要让TS识别它，你必须为CSS文件创建一个

   .d.ts

   文件。您将获得 CSS 文件的智能感知。
3. 您已正确设置 tsconfig.json 的路径别名。这一步不需要做任何事情。
4. 最后，也是最重要的，您正在使用 webpack，并且必须正确设置其

   resolve.alias

   才能完成将这些别名路径转译为扩展的真实文件路径的脏工作。

我希望这有帮助！