萨斯-杰森进口商

JSON进口商 混入。允许 @use编号/@import编号 .json 由 Sass 文件解析的文件 sass-embedded,使用 导入器 API。 。 。 .

要求数 节点js 22.12或以后 (所需员额) require() (a) 无害环境管理一揽子措施.

使用量

混入

常见JS :

const sass = require('sass-embedded');
const jsonImporter = require('@blakedarlin/sass-json-importer');

const sassOptions = {
    importers: [jsonImporter()],
};

// Sync
const result = sass.compile(scssFilename, sassOptions);

// Async
const result = await sass.compileAsync(scssFilename, sassOptions);

ES模块 :

import * as sass from 'sass-embedded';
import jsonImporter from '@blakedarlin/sass-json-importer';

const sassOptions = {
    importers: [jsonImporter()],
};

const result = sass.compile(scssFilename, sassOptions);

负载

loadPaths?: string[]

进口商接受 loadPaths 选项,这是绝对路径的字符串数组。 Sass 文件的父文件自动添加为第一个 loadPaths 条目,因此无需指定.

const result = sass.compile(scssFilename, {
    importers: [
        jsonImporter({ loadPaths: ['/some/path', '/src/node_modules'] }),
    ],
});

骆驼 Case to kebab- case

convertCase?: boolean

是否将标准的JavaScript骆驼Case密钥转换为符合 CSS/SCSS 的kebab- case密钥 。 默认是 false示例:

variables.json数字 :

{
    "bgBackgroundColor": "red"
}

style.scss数字 :

@import 'variables.json';

div {
    background: $bg-background-color;
}

实现 convertCase 选项 :

const result = sass.compile(scssFilename, {
    importers: [jsonImporter({ convertCase: true })],
});

WordPress 内部链接

resolveWordPressInternals?: boolean

是否将 WordPress 风格的内部链接转换为 CSS 自定义属性 。 默认是 false。 。 。 .

从WordPress 6.3.0起, WP_Theme_JSON::resolve_variables 解决 CSS 自定义属性的内部链接格式。 例如, var:preset|color|secondary - > (中文) var(--wp--preset--color--secondary)。该选项同样在 JSON 中转换这些类型的值.

const result = sass.compile(scssFilename, {
    importers: [jsonImporter({ resolveWordPressInternals: true })],
});

在地图上刻入密钥

默认情况下,在地图中所有密钥都被导入为未字符串 .

一个 json 文件 :

{
    "red": "#c33",
    "bee-yellow": "#fdfd00"
}

将导入为 scs:

$colors: (
    red: #c33,
    beeYellow: #fdfd00,
);

上面的相片图 red 是一个颜色,而 beeYellow 是一个字符串.

stringifyKeys: true 可用于将地图中的所有密钥串入.

何时 stringifyKeys: true,从上方导入以下为 json 示例的 scs 映射 :

$colors: (
    'red': #c33,
    'beeYellow': #fdfd00,
);

鸣谢

本单元基于原版 节点-ass-json-导入器 编辑 萨斯-杰森进口商。但不幸的是,WordPress的主题都没有正确处理.json文件.