StringOptionsWithoutImporter<sync>
类型参数
-
sync扩展"sync"|"async"
这允许 TypeScript 检查器验证异步Importer、FileImporter和CustomFunction没有传递给compile或compileString。
层次结构
- Options<sync>
- StringOptionsWithoutImporter
输入
可选
loadPaths
用于查找由 @use
和 @import
等规则加载的样式表的路径。
加载路径 loadPath
等同于以下 FileImporter
{
findFileUrl(url) {
// Load paths only support relative URLs.
if (/^[a-z]+:/i.test(url)) return null;
return new URL(url, pathToFileURL(loadPath));
}
}
可选
syntax
可选
url
输出
可选
charset
- Dart Sass
- 自 1.54.0 起
- Node Sass
- ✗
如果为 true
,则如果编译器输出非 ASCII CSS,则编译器可能会添加前缀 @charset "UTF-8";
或 U+FEFF(字节顺序标记)。
如果为 false
,则编译器绝不会发出这些字节序列。在 HTML <style>
标记中连接或嵌入时,这是理想的选择。(输出仍然是 UTF-8。)
默认值
true
可选
sourceMap
Sass 是否应生成源映射。如果生成,源映射将作为 sourceMap 提供。
⚠️ 注意!
Sass 不会自动向生成的 CSS 添加 sourceMappingURL
注释。由调用方负责此操作,因为调用方完全了解 CSS 和源映射之间的相互关系以及它们将如何提供给 浏览器。
默认值
false
可选
sourceMapIncludeSources
可选
style
已编译 CSS 的 OutputStyle。
示例
const source = `
h1 {
font-size: 40px;
code {
font-face: Roboto Mono;
}
}`;
let result = sass.compileString(source, {style: "expanded"});
console.log(result.css.toString());
// h1 {
// font-size: 40px;
// }
// h1 code {
// font-face: Roboto Mono;
// }
result = sass.compileString(source, {style: "compressed"})
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}
插件
可选
functions
所有样式表中可用的其他 Sass 内置函数。此选项采用一个对象,其键是 Sass 函数签名,就像您为 @function 规则
编写的那样,其值是 CustomFunction。
函数传递 Value 的子类,并且必须返回相同内容。如果返回值包含 SassCalculation,则它们将在返回之前进行简化。
在编写自定义函数时,重要的是使它们尽可能地对用户友好,并且尽可能地接近 Sass 核心函数设定的标准。一些好的准则包括
使用
Value.assert*
方法,例如 assertString,将未类型化的Value
对象转换为更具体的类型。对于直接作为参数传递的值,也请传递参数名称。这可确保当用户向您的函数传递错误类型时,他们会收到良好的错误消息。各个类可能具有更具体的
assert*
方法,例如 assertInt,应在可能时使用。在处理元数据(逗号与空格分隔、带括号与不带括号、带引号与不带引号、单位)的列表、字符串和数字等值时,输出元数据应与输入元数据匹配 。
有疑问时,列表应默认为逗号分隔,字符串应默认为带引号,数字应默认为 无单位。
在 Sass 中,列表和字符串使用以 1 为基础的索引,并使用负索引从值的末尾索引。函数应遵循这些约定。 sassIndexToListIndex 和 sassIndexToStringIndex 可用于自动执行此操作 。
Sass 中的字符串索引引用 Unicode 代码点,而 JavaScript 字符串索引引用 UTF-16 代码单元。例如,字符 U+1F60A SMILING FACE WITH SMILING EYES 是单个 Unicode 代码点,但在 UTF-16 中表示为两个代码单元(
0xD83D
和0xDE0A
)。因此,在 JavaScript 中,"a😊b".charCodeAt(1)
返回0xD83D
,而在 Sass 中,str-slice("a😊b", 1, 1)
返回"😊"
。函数应遵循 Sass 的约定。 sassIndexToStringIndex 可用于自动执行此操作,并且 sassLength getter 可用于访问代码 点中的字符串长度。
示例
sass.compileString(`
h1 {
font-size: pow(2, 5) * 1px;
}`, {
functions: {
// Note: in real code, you should use `math.pow()` from the built-in
// `sass:math` module.
'pow($base, $exponent)': function(args) {
const base = args[0].assertNumber('base').assertNoUnits('base');
const exponent =
args[1].assertNumber('exponent').assertNoUnits('exponent');
return new sass.SassNumber(Math.pow(base.value, exponent.value));
}
}
});
Optional
importers
自定义导入器,控制 Sass 如何解析来自 @use
和 @import
等规则的加载。
按顺序尝试以下方法来解析加载项
用于加载当前样式表的导入器,其中加载的 URL 相对于当前样式表的规范 URL 解析。
按顺序依次在 importers 中的每个 Importer、FileImporter 或 NodePackageImporter。
按顺序依次在 loadPaths 中的每个加载路径。
如果以上方法均未返回 Sass 文件,则加载失败,并且 Sass 会引发 错误。
消息
可选
alertAscii
如果为 true
,编译器将在其错误和警告消息中仅使用 ASCII 字符。否则,它还可以使用非 ASCII Unicode 字符 。
默认值
false
可选
alertColor
如果为 true
,编译器将在其错误和警告消息中使用 ANSI 颜色转义代码。如果为 false
,则不会使用这些代码。如果未定义,编译器将根据用户是否使用交互式 终端来确定是否使用颜色。
可选
logger
可选
quietDeps
如果将此选项设置为 true
,Sass 不会打印由依赖项引起的警告。“依赖项”的定义是通过 loadPaths 或 importers 加载的任何文件。相对于入口点导入的样式表不被视为 依赖项。
这对于使你无法自行修复的弃用警告静音很有用。但是,请也将弃用通知你的依赖项,以便它们可以尽快 修复!
⚠️ 注意!
如果在没有 url 的情况下调用 compileString 或 compileStringAsync,则它加载的所有样式表都将被视为依赖项。由于它没有自己的路径,因此它加载的所有内容都来自加载路径,而不是相对 导入。
默认值
false
可选
verbose
默认情况下,Dart Sass 每编译一次只打印五个相同的弃用警告实例,以避免在控制台中淹没用户。如果你将 verbose
设置为 true
,它将打印遇到的每个弃用警告。
默认值
false
可以传递给 compileString 或 compileStringAsync 的选项。
如果未传递 importer 字段,则如果将
file://
URL 传递给 url 字段,入口文件可以加载相对于自身的文件。