# @blakedarlin/sass-json-importer 中文文档

规范地址：https://npmcn.com/package/%40blakedarlin/sass-json-importer/

版本：1\.4\.0
npm 元数据更新时间：2026-10-09T13:44:19.020Z
中文译文更新时间：2026-11-08T06:08:56.740Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blakedarlin/sass-json-importer
原文对照：https://npmcn.com/package/%40blakedarlin/sass-json-importer/?lang=original
项目主页：https://github.com/blakedarlin/sass-json-importer#readme
源码仓库：https://github.com/blakedarlin/sass-json-importer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.3 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：1 个
- 首次发布：2024-09-30T19:34:30.856Z
- 最新版本发布：2026-10-09T13:44:18.814Z
- 近 30 天下载量：2075（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 5 个）

## 中文简介

允许在 Sass 文件中导入由 sass/ sass- 嵌入解析的 JSON, 并添加对 WordPress 的支持 .

## 安装

```sh
npm install @blakedarlin/sass-json-importer
```

也可以使用：`pnpm add @blakedarlin/sass-json-importer`、`yarn add @blakedarlin/sass-json-importer`、`bun add @blakedarlin/sass-json-importer`

## README

# 萨斯-杰森进口商

JSON进口商 [混入](https://github.com/sass/embedded-host-node)。允许 `@use`编号/`@import`编号 `.json` 由 Sass 文件解析的文件 `sass-embedded`,使用 [导入器 API](https://sass-lang.com/documentation/js-api/interfaces/importer/)。 。 。 .

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

## 使用量

### [混入](https://github.com/sass/embedded-host-node)

常见JS :

```javascript
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模块 :

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

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

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

## 负载

```javascript
loadPaths?: string[]
```

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

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

## 骆驼 Case to kebab- case

```javascript
convertCase?: boolean
```

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

`variables.json`数字 :

```json
{
    "bgBackgroundColor": "red"
}
```

`style.scss`数字 :

```scss
@import 'variables.json';

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

实现 `convertCase` 选项 :

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

## WordPress 内部链接

```javascript
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 中转换这些类型的值.

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

## 在地图上刻入密钥

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

一个 json 文件 :

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

将导入为 scs:

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

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

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

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

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

## 鸣谢

本单元基于原版 [节点-ass-json-导入器](https://www.npmjs.com/package/node-sass-json-importer) 编辑 [萨斯-杰森进口商](https://github.com/neild3r/sass-json-importer)。但不幸的是,WordPress的主题都没有正确处理.json文件.

## 常见问题

### @blakedarlin/sass-json-importer 是什么？

允许在 Sass 文件中导入由 sass/ sass- 嵌入解析的 JSON, 并添加对 WordPress 的支持 \.

### 如何安装 @blakedarlin/sass-json-importer？

在项目目录运行 npm install @blakedarlin/sass-json-importer，或使用 pnpm add / yarn add / bun add。

### @blakedarlin/sass-json-importer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @blakedarlin/sass-json-importer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @blakedarlin/sass-json-importer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @blakedarlin/sass-json-importer 可以商用吗？

@blakedarlin/sass-json-importer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blakedarlin/sass-json-importer 的下载量有多少？

根据 npm 官方下载统计，@blakedarlin/sass-json-importer 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,075 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blakedarlin/sass-json-importer 还在维护吗？

最新版本 1\.4\.0 发布于 2026/10/09（29 天前）；至今共发布 7 个版本，其中过去 12 个月发布了 5 个；首次发布于 2024/10/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。