"sass-typings" task

该任务为 CSS 样式生成 TypeScript 类型，它支持三种不同的文件格式：

• .css 用于普通的层级样式表
• .scss CSS 的预先处理器，由 Syntactically Awesome Style Sheet (SASS) 项目实现。
• .sass 老版的缩进语法，由于一些人喜欢这些语法，所以现在还被支持。

什么时候使用

建议在任何使用 CSS 的 TypeScript 应用中使用 SASS. .scss 是一个不错的选择，因为它是 CSS 的超集。

何时使用

假设你的 CSS 样式像下面一样：

src/my-styles.scss

$marginValue: 20px;

.label {
  margin-bottom: $marginValue;
}

在 Heft 调用 TypeScript 之前，sass-typings 任务可以生成一个包含类型申明临时文件：

temp/sass-ts/styles.scss.d.ts

// This file was generated by a tool. Modifying it will produce unexpected behavior
export interface IExportStyles {
  label: string;
}
declare const strings: IExportStyles;
export default strings;

这使得 styles.label 样式可以如下这样导入：

src/ExampleApp.tsx

import * as React from 'react';
import styles from './my-styles.scss';

export class ExampleApp extends React.Component {
  public render(): React.ReactNode {
    return <p className={styles.label}>Example text</p>;
  }
}

诸如 create-react-app 这些典型的工具链将产生无类型的 styles 对象，但是这样做会出现问题。Heft 生成的 .d.ts 会提供完整的样式名提示，并且允许编译器检测拼写等常见的错误。

The .d.ts file is generated using @rushstack/typings-generator. You can reuse this library to implement custom Heft plugins that generate typings for other resources besides CSS.

.d.ts 文件使用 @rushstack/typings-generator 生成。 你可以使用这个库来实现 Heft 对其他资源的类型生成器。

package.json dependencies

无 - 这个功能被 Heft 内部实现。

Config files

build-tests/heft-sass-test 项目提供了 .css, .scss 和 .sass 的示例。

sass-typings 插件默认开启，并会对 src 文件下所有支持的扩展名（.css, .scss, 和 .sass）的文件生成类型。它的行为可以在 sass.json 配置文件中自定义，在大多数情况下，默认行为足够使用。

通过在编译器配置中的 rootDirs 设置中添加 temp/sass-ts 来引用生成的类型。

tsconfig.json

{
  "$schema": "http://json.schemastore.org/tsconfig",

  "compilerOptions": {
    "rootDirs": ["src/", "temp/sass-ts/"],

确保 copy-static-assets 任务被配置为复制 CSS 的文件扩展名。