征求意见稿：包 导入器

Sass 用户经常需要使用依赖项中的样式来定制现有主题或访问样式工具。历史上，Sass 没有为使用依赖项中的包指定标准方法。这导致了各种特定于域的解决方案，包括 Webpack 中的 ~ 前缀，以及将 node_modules 添加到 loadPaths 中。

这是一个常见的痛点，并且可能使依赖于依赖项变得困难。它还会使将项目迁移到新的构建 流程变得更加困难。

包导入器包导入器永久链接

我们正在提出一种新的导入器类型，它允许用户使用 pkg: URL 模式来指示 Sass 使用特定 环境的解析标准和约定来解析依赖项 URL。

为了解决最大的用例，我们建议为 Node 生态系统内置包导入器。我们建议包作者为其在分发的 package.json 中的包的入口点定义一个 sass 条件导出。例如，包含以下内容的 package.json

{
  "exports": {
    ".": {
      "sass": "./src/scss/index.scss",
      "import": "./dist/js/index.mjs",
      "default": "./dist/js/index.js"
    },
    "./utils": {
      "sass": "./src/scss/_utils.scss",
      "default": "./dist/js/utils.js"
    }
  }
}

将允许包使用者 编写

@use "pkg:library";
@use "pkg:library/utils";

我们希望允许 Sass 包使用者开始使用 pkg: URL，而无需包作者进行任何更改。由于许多 Sass 包已经在各种方式中定义了它们的入口点，因此 Node 包导入器还支持其他几种定义入口点的方法，这些方法涵盖了我们观察到的多数实现。这些解析按以下 顺序进行

1. sass、style 或 default 条件在 package.json exports 中，解析为 Sass 或 CSS 文件。

2. 如果不存在子路径，则查找根 导出

   1. package.json 根处的 sass 键。

   2. package.json 根处的 style 键。

   3. index 文件在包根目录中，解析文件扩展名和 部分。

3. 如果存在子路径，则相对于包根目录解析该路径，并解析文件扩展名和 部分。

为了更好地理解并允许针对推荐算法进行测试，已经创建了一个名为 Sass pkg: test 的存储库，其中包含算法的初步实现 。

详细信息详细信息永久链接

由于 Node 生态系统主要关注分发 JavaScript，因此我们需要找到一种方法来允许包作者分发 Sass。在许多方面，与 TypeScript 类型最接近的类似物是类型定义文件，因为类型定义文件与编译后的代码一起分发，并且通常不是包中的主要导出 。

根据我们对超过 400 个设计库和框架包的分析，我们预计包使用者将能够对许多包使用 pkg: URL，而无需包作者进行任何更改。包作者将能够更好地指定和记录如何使用这些 包。

我们的分析还表明，分发 Sass 的包几乎总是与 JavaScript 代码一起分发。一些包确实将 Sass 文件指定为 package.json 根目录中的 sass 键，或将 CSS 文件指定为 style 键，Node 包导入器将支持这两种方法。我们观察到很少使用 main 或 module 键来指定 CSS 或 Sass，这些键将不被 支持。

虽然我们观察到目前很少使用 条件导出 字段来指定 Sass 和 CSS 文件，但我们预计随着包作者采用条件导出，这种情况会越来越普遍。此外，像 Vite、Parcel 和 Webpack 的 Sass Loader 这样的构建工具目前都使用 sass 和 style 自定义条件来解析 Sass 路径。

用户需要通过从 sass 导入 nodePackageImporter 并将其包含在 importers 列表中来选择加入新的包导入器。这在浏览器中的 Sass 中不可用 。

const sass = require('sass');

sass.compile('style.scss', {
    importers: [sass.nodePackageImporter]
})

下一步下一步永久链接

这仍处于提案阶段，因此我们欢迎反馈。在 Github 上查看提案，并在 打开一个问题，提出您的任何想法或担忧 。