LegacyFileOptions<sync>

如果 file 传递时没有 data，Sass 将加载 file 中的样式表并将其编译为 CSS。

类型参数

sync extends "sync" | "async"

这允许 TypeScript 检查器验证 LegacyAsyncImporters 和 LegacyAsyncFunctions 未传递给 renderSync。

层次结构

LegacySharedOptions<sync>
- LegacyFileOptions

索引

输入

`可选` data

data?: undefined

参见 file 以了解传递 file 和 data 的文档。

file

file: string

Dart Sass: 自 1.11.0 起
Node Sass: 部分

Node Sass 和旧版本的 Dart Sass 支持加载扩展名为 .css 的文件，但与规范相反，它们被视为SCSS 文件，而不是被解析为CSS。这种行为已过时，不应依赖于它。任何使用 Sass 功能的文件都应使用 .scss 扩展名。

所有版本的 Node Sass 和 Dart Sass 否则都支持下面描述的文件选项。

Sass 要加载和编译的文件的路径。如果文件的扩展名为 .scss，它将被解析为SCSS；如果它为 .sass，它将被解析为缩进语法；如果它为 .css，它将被解析为纯CSS。如果没有扩展名，它将被解析为 SCSS。

示例

sass.renderSync({file: "style.scss"});

`可选` includePaths

includePaths?: string[]

Dart Sass: 自 1.15.0 起
Node Sass: 自 3.9.0 起

Dart Sass 和 Node Sass 的早期版本不支持 SASS_PATH 环境变量。

此字符串数组选项提供了加载路径，供 Sass 查找样式表。较早的加载路径优先于较晚的路径。

sass.renderSync({
  file: "style.scss",
  includePaths: ["node_modules/bootstrap/dist/css"]
});

如果设置了SASS_PATH环境变量，也会从中加载加载路径。该变量应为路径列表，以;（Windows）或:（其他操作系统）分隔。includePaths选项中的加载路径优先于SASS_PATH中的加载路径。

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css

输出

`可选` charset

charset?: boolean

Dart Sass: 从 1.39.0 开始
Node Sass: ✗

默认情况下，如果 CSS 文档包含非 ASCII 字符，Sass 会添加一个 @charset 声明（在扩展输出模式下）或一个字节顺序标记（在压缩模式下）来指示其编码给浏览器或其他消费者。如果 charset 为 false，则会省略这些注释。

`可选` indentType

indentType?: "space" | "tab"

Dart Sass: ✓
Node Sass: 从 3.0.0 开始

生成的 CSS 应该使用空格还是制表符进行缩进。

const result = sass.renderSync({
  file: "style.scss",
  indentType: "tab",
  indentWidth: 1
});

result.css.toString();
// "h1 {\n\tfont-size: 40px;\n}\n"

默认值

'space'

`可选` indentWidth

indentWidth?: number

Dart Sass: ✓
Node Sass: 从 3.0.0 开始

在生成的 CSS 中，每个缩进级别应该使用多少个空格或制表符（取决于 indentType）。它必须介于 0 和 10 之间（包含）。

默认值

2

`可选` linefeed

linefeed?: "cr" | "crlf" | "lf" | "lfcr"

Dart Sass: ✓
Node Sass: 从 3.0.0 开始

在生成的 CSS 中，每行末尾使用哪个字符序列。它可以具有以下值

'lf' 使用 U+000A LINE FEED。
'lfcr' 使用 U+000A LINE FEED 之后是 U+000D CARRIAGE RETURN。
'cr' 使用 U+000D CARRIAGE RETURN。
'crlf' 使用 U+000D CARRIAGE RETURN 之后是 U+000A LINE FEED。

默认值

'lf'

`可选` outputStyle

outputStyle?: "expanded" | "compact" | "compressed" | "nested"

编译后的 CSS 的输出样式。有四种可能的输出样式

"expanded"（Dart Sass 的默认值）将每个选择器和声明写入单独的行。
"compressed" 尽可能删除多余的字符，并将整个样式表写入一行。
"nested"（Node Sass 的默认值，Dart Sass 不支持）缩进 CSS 规则以匹配 Sass 源的嵌套。
"compact"（Dart Sass 不支持）将每个 CSS 规则写入单独的一行。

示例

const source = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

let result = sass.renderSync({
  data: source,
  outputStyle: "expanded"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// h1 code {
//   font-face: Roboto Mono;
// }

result = sass.renderSync({
  data: source,
  outputStyle: "compressed"
});
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}

result = sass.renderSync({
  data: source,
  outputStyle: "nested"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px; }
//   h1 code {
//     font-face: Roboto Mono; }

result = sass.renderSync({
  data: source,
  outputStyle: "compact"
});
console.log(result.css.toString());
// h1 { font-size: 40px; }
// h1 code { font-face: Roboto Mono; }

插件

`可选` functions

functions?: {
[key: string]: LegacyFunction<sync>;
}

所有样式表中可用的附加内置 Sass 函数。此选项接受一个对象，其键为 Sass 函数签名，其值为 LegacyFunction。每个函数应采用与其签名相同的参数。

函数传递 LegacyValue 的子类，并且必须返回相同的值。

⚠️ 注意！

在编写自定义函数时，务必确保所有参数都是您预期的类型。否则，用户样式表可能会以难以调试的方式崩溃，或者更糟的是，编译为无意义的 CSS。

示例

sass.render({
  data: `
h1 {
  font-size: pow(2, 5) * 1px;
}`,
  functions: {
    // This function uses the synchronous API, and can be passed to either
    // renderSync() or render().
    'pow($base, $exponent)': function(base, exponent) {
      if (!(base instanceof sass.types.Number)) {
        throw "$base: Expected a number.";
      } else if (base.getUnit()) {
        throw "$base: Expected a unitless number.";
      }

      if (!(exponent instanceof sass.types.Number)) {
        throw "$exponent: Expected a number.";
      } else if (exponent.getUnit()) {
        throw "$exponent: Expected a unitless number.";
      }

      return new sass.types.Number(
          Math.pow(base.getValue(), exponent.getValue()));
    },

    // This function uses the asynchronous API, and can only be passed to
    // render().
    'sqrt($number)': function(number, done) {
      if (!(number instanceof sass.types.Number)) {
        throw "$number: Expected a number.";
      } else if (number.getUnit()) {
        throw "$number: Expected a unitless number.";
      }

      done(new sass.types.Number(Math.sqrt(number.getValue())));
    }
  }
}, function(err, result) {
  console.log(result.css.toString());
  // h1 {
  //   font-size: 32px;
  // }
});

类型声明

[key: string]: LegacyFunction<sync>

`可选` importer

importer?: LegacyImporter<sync> | LegacyImporter<sync>[]

Dart Sass: ✓
Node Sass: 从 3.0.0 开始

3.0.0 之前的 Node Sass 版本不支持导入器数组，也不支持返回 Error 对象的导入器。

2.0.0 之前的 Node Sass 版本根本不支持 importer 选项。

Dart Sass: 从 1.20.2 开始
Node Sass: ✗

1.20.2 之前的 Dart Sass 版本更喜欢使用 includePaths 解析导入，而不是使用自定义导入器解析导入。

目前所有版本的 Node Sass 都会将导入传递给导入器，然后再相对于出现 @import 的文件加载它们。这种行为被认为是不正确的，不应该依赖，因为它违反了局部性原则，该原则指出，应该能够在不知道整个系统设置的所有信息的情况下推断出样式表。如果用户尝试相对于另一个样式表导入样式表，该导入应该始终有效。不应可能存在其他地方的某些配置来破坏它。

当遇到 @use 规则或 @import 规则时，用于加载文件的附加处理程序。它可以是单个 LegacyImporter 函数，也可以是 LegacyImporter 的数组。

导入器获取 @import 或 @use 规则的 URL 并返回一个 LegacyImporterResult，指示如何处理该规则。有关更多详细信息，请参阅 LegacySyncImporter 和 LegacyAsyncImporter。

通过尝试按顺序解析加载

从磁盘加载相对于出现 @use 或 @import 的文件的文件。
每个自定义导入器。
加载相对于当前工作目录的文件。
includePaths 中的每个加载路径。
SASS_PATH 环境变量中指定的每个加载路径，该路径在 Windows 上应该是分号分隔的，在其他地方应该是冒号分隔的。

示例

sass.render({
  file: "style.scss",
  importer: [
    // This importer uses the synchronous API, and can be passed to either
    // renderSync() or render().
    function(url, prev) {
      // This generates a stylesheet from scratch for `@use "big-headers"`.
      if (url != "big-headers") return null;

      return {
        contents: `
h1 {
  font-size: 40px;
}`
      };
    },

    // This importer uses the asynchronous API, and can only be passed to
    // render().
    function(url, prev, done) {
      // Convert `@use "foo/bar"` to "node_modules/foo/sass/bar".
      const components = url.split('/');
      const innerPath = components.slice(1).join('/');
      done({
        file: `node_modules/${components.first}/sass/${innerPath}`
      });
    }
  ]
}, function(err, result) {
  // ...
});

`可选` pkgImporter

pkgImporter?: NodePackageImporter

Dart Sass: 从 2.0 开始
Node Sass: ✗

如果此选项设置为 NodePackageImporter 的实例，Sass 将使用内置的 Node.js 包导入器来解析具有 pkg: URL 方案的 Sass 文件。有关库作者和用户的详细信息，请参阅 NodePackageImporter 文档。

示例

sass.renderSync({
  data: '@use "pkg:vuetify";',
  pkgImporter: new sass.NodePackageImporter()
});

消息

`可选` fatalDeprecations

fatalDeprecations?: (DeprecationOrId | Version)[]

一组将视为致命的弃用。

如果在编译过程中遇到任何提供的类型的弃用警告，编译器将报错。

如果提供了 Version，则该编译器版本中所有处于活动状态的弃用都将被视为致命。

兼容性

dart: "1.78.0", node: false

`可选` futureDeprecations

futureDeprecations?: DeprecationOrId[]

一组要提前加入的未来弃用。

这里传递的未来弃用将被编译器视为活动，并根据需要发出警告。

兼容性

dart: "1.78.0", node: false

`可选` logger

logger?: Logger

Dart Sass: 自 1.43.0 起
Node Sass: ✗

用于处理来自 Sass 的警告和/或调试消息的对象。

默认情况下，Sass 会将警告和调试消息输出到标准错误，但如果 warn 或 debug 被设置，它将改为调用它们。

特殊值 silent 可用于轻松地静默所有消息。

`可选` quietDeps

quietDeps?: boolean

Dart Sass: 自 1.35.0 起
Node Sass: ✗

如果此选项设置为 true，Sass 不会打印由依赖项引起的警告。 “依赖项”被定义为通过 includePaths 或 importer 加载的任何文件。相对于入口点导入的样式表不被视为依赖项。

这对于静默无法自行修复的弃用警告很有用。但是，请也通知您的依赖项有关弃用的情况，以便他们尽快修复！

⚠️ 注意！

如果 render 或 renderSync 在没有 file 或 file 的情况下被调用，它加载的所有样式表都将被视为依赖项。由于它没有自己的路径，因此它加载的所有内容都来自加载路径，而不是来自相对导入。

默认值

false

`可选` silenceDeprecations

silenceDeprecations?: DeprecationOrId[]

一组要忽略的活动弃用。

如果在编译过程中遇到任何提供的类型的弃用警告，编译器将忽略它。

⚠️ 注意！

您所依赖的弃用功能最终将中断。

兼容性

dart: "1.78.0", node: false

`可选` verbose

verbose?: boolean

Dart Sass: 自 1.35.0 起
Node Sass: ✗

默认情况下，Dart Sass 每次编译只会打印相同弃用警告的五个实例，以避免在控制台中出现大量噪音。如果您将 verbose 设置为 true，它将改为打印遇到的每个弃用警告。

默认值

false

源映射

`可选` omitSourceMapUrl

omitSourceMapUrl?: boolean

如果为 true，Sass 不会从生成的 CSS 中添加指向源映射的链接。

const result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  omitSourceMapUrl: true
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }

默认值

false

`可选` outFile

outFile?: string

Sass 预计生成的 CSS 保存到的位置。它用于确定用于从生成的 CSS 到源映射的链接的 URL，以及从源映射到 Sass 源文件的链接。

⚠️ 注意！

尽管有名称，但 Sass 不会将 CSS 输出写入此文件。调用方必须自己完成。

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

`可选` sourceMap

sourceMap?: string | boolean

Sass 是否应该生成源映射。如果生成，源映射将作为 map 可用（除非 sourceMapEmbed 为 true）。

如果此选项是一个字符串，则是源映射预计写入的路径，该路径用于从生成的 CSS 中链接到源映射，以及从源映射链接到 Sass 源文件。请注意，如果 sourceMap 是一个字符串，并且没有传递 outFile，则 Sass 假定 CSS 将写入与文件选项相同的目录（如果传递了该选项）。

如果此选项为 true，则该路径被假定为 outFile，并在末尾添加了 .map。如果它为 true 且没有传递 outFile，则它不会产生影响。

示例

let result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.map * /

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

默认值

false

`可选` sourceMapContents

sourceMapContents?: boolean

是否在源映射中嵌入生成 CSS 的所有 Sass 文件的完整内容。这可能会产生非常大的源映射，但它保证源将在任何计算机上可用，无论 CSS 如何提供。

示例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapContents: true
})

默认值

false

`可选` sourceMapEmbed

sourceMapEmbed?: boolean

是否将源映射文件的内容嵌入到生成的 CSS 中，而不是创建一个单独的文件并从 CSS 中链接到它。

示例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapEmbed: true
});

默认值

false

`可选` sourceMapRoot

sourceMapRoot?: string

如果传递了此参数，它将被附加到源映射到 Sass 源文件的所有链接之前。

类型参数

sync extends "sync" | "async"

层次结构

索引

输入

输出

插件

消息

源映射

输入

可选 data

file

示例

可选 includePaths

输出

可选 charset

可选 indentType

默认值

可选 indentWidth

默认值

可选 linefeed

默认值

可选 outputStyle

示例

插件

可选 functions

⚠️ 注意！

示例

类型声明

[key: string]: LegacyFunction<sync>

可选 importer

示例

可选 pkgImporter

示例

消息

可选 fatalDeprecations

兼容性

可选 futureDeprecations

兼容性

可选 logger

可选 quietDeps

⚠️ 注意！

默认值

可选 silenceDeprecations

⚠️ 注意！

兼容性

可选 verbose

默认值

源映射

可选 omitSourceMapUrl

默认值

可选 outFile

⚠️ 注意！

可选 sourceMap

示例

默认值

可选 sourceMapContents

示例

默认值

可选 sourceMapEmbed

示例

默认值

可选 sourceMapRoot

`可选` data

`可选` includePaths

`可选` charset

`可选` indentType

`可选` indentWidth

`可选` linefeed

`可选` outputStyle

`可选` functions

`可选` importer

`可选` pkgImporter

`可选` fatalDeprecations

`可选` futureDeprecations

`可选` logger

`可选` quietDeps

`可选` silenceDeprecations

`可选` verbose

`可选` omitSourceMapUrl

`可选` outFile

`可选` sourceMap

`可选` sourceMapContents

`可选` sourceMapEmbed

`可选` sourceMapRoot