NodePackageImporter

兼容性

Dart Sass

自 1.71.0 起

Node Sass

✗

内置的 Node.js 包导入器。它根据标准 Node.js 解析算法从 node_modules 加载 pkg: URL。

Node.js 包导入器作为可以添加到 importers 选项的类公开。

const sass = require('sass');
sass.compileString('@use "pkg:vuetify', {
  importers: [new sass.NodePackageImporter()]
});
Copy

编写 Sass 包

包作者可以通过其 package.json 清单控制向其用户公开的内容。推荐的方法是向 package.json 添加 sass 条件导出。

// node_modules/uicomponents/package.json
{
  "exports": {
    ".": {
      "sass": "./src/scss/index.scss",
      "import": "./dist/js/index.mjs",
      "default": "./dist/js/index.js"
    }
  }
}
Copy

这允许包用户编写 @use "pkg:uicomponents" 来加载 node_modules/uicomponents/src/scss/index.scss 中的文件。

Node.js 包导入器支持 Node.js 包入口点 支持的各种格式，允许作者公开多个子路径。

// node_modules/uicomponents/package.json
{
  "exports": {
    ".": {
      "sass": "./src/scss/index.scss",
    },
    "./colors.scss": {
      "sass": "./src/scss/_colors.scss",
    },
    "./theme/*.scss": {
      "sass": "./src/scss/theme/*.scss",
    },
  }
}
Copy

这允许包用户编写

• @use "pkg:uicomponents"; 以导入根导出。
• @use "pkg:uicomponents/colors"; 以导入颜色部分。
• @use "pkg:uicomponents/theme/purple"; 以导入紫色主题。

请注意，虽然库用户可以依靠导入器来解析 部分、索引文件 和扩展名，但库作者必须在 exports 中指定完整的文件路径。

除了 sass 条件外，style 条件也是可以接受的。如果 Sass 是相关文件类型，则 Sass 将匹配 default 条件，但作者不建议依赖此条件。值得注意的是，键的顺序很重要，导入器将解析为第一个键为 sass、style 或 default 的值，因此您应该始终将 default 放在最后。

为了帮助尚未使用 exports 字段过渡到包入口点的包作者，Node.js 包导入器提供了几个后备选项。如果 pkg: URL 没有子路径，则 Node.js 包导入器将在 package.json 的根目录中查找 sass 或 style 键。

// node_modules/uicomponents/package.json
{
  "sass": "./src/scss/index.scss",
}
Copy

这允许用户编写 @use "pkg:uicomponents"; 以导入 index.scss 文件。

最后，Node.js 包导入器将在包根目录中查找 index 文件，解析部分和扩展名。例如，如果文件 _index.scss 存在于 uicomponents 的包根目录中，则用户可以使用 @use "pkg:uicomponents"; 导入该文件。

如果 pkg: URL 包含包入口点中没有匹配项的子路径，则 Node.js 导入器将尝试在包根目录中找到该文件，解析文件扩展名、部分和索引文件。例如，如果文件 src/sass/_colors.scss 存在于 uicomponents 包中，则用户可以使用 @use "pkg:uicomponents/src/sass/colors"; 导入该文件。