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"; 來匯入 colors 部分。
• @use "pkg:uicomponents/theme/purple"; 來匯入 purple 主題。

請注意，雖然程式庫使用者可以依靠匯入器來解析部分檔案、索引檔案和副檔名，但程式庫作者必須在 exports 中指定完整的檔案路徑。

除了 sass 條件之外，style 條件也可以接受。如果檔案類型相關，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 檔案，解析 partial 檔案和副檔名。例如，如果 uicomponents 套件的根目錄存在 _index.scss 檔案，使用者可以使用 @use "pkg:uicomponents"; 來導入該檔案。

如果 pkg: URL 包含套件進入點中沒有相符項目的子路徑，Node.js 導入器會嘗試在套件根目錄相對位置尋找該檔案，解析檔案副檔名、partial 檔案和 index 檔案。例如，如果 uicomponents 套件中存在 src/sass/_colors.scss 檔案，使用者可以使用 @use "pkg:uicomponents/src/sass/colors"; 來導入該檔案。