为 scss 在 parcel 中生成 TypeScript 类型

Question

根据我在 the documentation 中收集到的信息，只需很少的配置并且无需 tsconfig.json。

我要解决的问题是：Cannot find module './styles.module.scss' or its corresponding type declarations. ts(2307)

这是我的项目结构：

我尝试过的事情：

安装npm i @types/scss-parser --save-dev
Generating Types:
```
{
   ...
     "source": "src/index.ts",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
   ...
}
```
但这只是给了我：Error: No transformers found for src/index.html with pipeline: 'types'.

删除 types: 然后导致错误：@parcel/namer-default: Target "module" declares an output file path of "dist/index.js" which does not match the compiled bundle type "html".

更改为 "module": "dist/index.html" 结果：@parcel/core: Unexpected output file type .html in target "module"... File extension must be .js or .mjs"

我不确定如何解决这个问题，感觉实际上必须做出某种 tsconfig.json 或 types 声明。

我只是想在这样做之前检查这里，看看是否有一种方法可以解决这个问题而无需制作额外的文件。有什么建议吗？

Answer 1

不幸的是，我认为 parcel 没有开箱即用的方法来生成必要的 .d.ts 文件来为 .scss 模块提供强类型。您在上面链接的 Generating Types documentation 描述了编写库的人（例如，其他人发布和使用的 npm 包）如何使用 parcel 生成一个合并的 .d.ts 文件，该文件描述了 .js 生成的包按包裹，这听起来不像您的用例。

幸运的是，有一个很棒的工具叫做typed-scss-modules，它可以生成.d.ts个文件来描述你项目中的所有.module.scss个文件，并且把它集成到一个parcel中是相当简单的基于项目。这是您需要做的：

安装typed-scss-modules：
```
 yarn add -D typed-scss-modules
```
向您的 package.json 添加一个命令，该命令将为您项目中的所有 .module.scss 文件生成 .d.ts 文件：
```
"build:scss-types": "tsm src --nameFormat none --exportType default",
```
默认情况下，typed-scss-modules 会将 .scss 文件中定义的 classes 的名称转换为驼峰式，并删除破折号。这不是 parcel 的行为方式（它将保持 class 名称不变）。但是您可以使用 --nameFormat none 选项与宗地行为保持一致。
然后，您可以像这样将 class 名称导入到您的打字稿文件中：
```
import classes from "./styles.module.scss";
```
（请注意这是如何使用默认导出的，而不是 import * from 语法 - 这与上面的 --exportType default 选项一致）。
现在 VSCode、tsc 和 @parcel/validator-typescript 应该很高兴。如果您在引用 classes 导入中的名称时出现拼写错误，您将获得 Intellisense 和错误。
为了获得最佳工作流程，您可以考虑将 build:scss-types 命令添加到构建和 CI 管道中，这样如果您犯了命名错误，就会出现构建时错误。您还可以运行 tsm 使用 --watch 选项在开发过程中自动重新生成 .d.ts 文件。

这里是a repo where this is all working，您可以将其用作示例。

为 scss 在 parcel 中生成 TypeScript 类型

Generating TypeScript typings in parcel for scss

types

sass

typescript

parceljs