`pkg:` Impoerter の発表

2024 年 2 月 16 日に投稿 Natalie Weizenbaum

数か月前、私たちは フィードバックを求めました共有された pkg: スキームを使用してさまざまなパッケージマネージャーからパッケージをロードできるインポーターの新しい標準の提案と、Node.js のモジュール解決アルゴリズムをサポートする組み込みの pkg: importer について。本日は、この機能が Dart Sass 1.71.0 でリリースされたことを発表できることを嬉しく思います。

loadPaths オプションに node_modules を手動で追加したり、ネストされたパッケージがまったく機能するかどうかを心配する必要はありません。URL に ~ を追加してポータビリティをすべて放棄する必要もありません。今は importers: [new NodePackageImporter()] を渡して @use 'pkg:library' と書くだけで、まさに自分が望むように機能します。

pkg: importer とは何ですか?pkg: importer とは何ですか? パーマリンク

pkg: importer は、誰でも記述することで実装できる仕様のようなものと考えてください カスタムインポーター 従う いくつかのルール。Node.js モジュールアルゴリズム用に 1 つ実装しましたが、Sass ファイルを RubyGems または PyPI または Composer。このようにして、Sass ファイルはロードする URL を変更する必要はありません。

pkg: URL はどのように見えますか?pkg: URL はどのように見えますか? パーマリンク

最も単純な URLpkg:library だけです。これにより、パッケージマネージャー内の library パッケージが検索され、定義されている場合はプライマリーエントリポイントファイルがロードされます。pkg:library/path/to/file と書くこともできます。この場合、パッケージのソースディレクトリで path/to/file が検索されます。他の Sass インポーターと同様に、ファイル拡張子、部分インデックス ファイルを処理するための標準的な解決を行います。

Node.js pkg: を使用する npm パッケージをどのように公開しますか?Node.js pkg: を使用する npm パッケージをどのように公開しますか? パーマリンク

Node.js pkg: importer は、package.json に Sass ファイルを宣言するための既存のすべての規則をサポートしています。そのため、既存の Sass パッケージはすぐに機能します。新しいパッケージを作成する場合は、"exports" フィールド を使用して "sass" キーを使用して、デフォルトでロードするスタイルシートを定義することをお勧めします。

{
  "exports": {
    "sass": "styles/index.scss"
  }
}

Node.js pkg: importer は "exports" 機能の全範囲をサポートしているため、異なるサブパスに対して別の場所を指定することもできます 

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./button.scss": {
      "sass": "styles/button.scss",
    },
    "./accordion.scss": {
      "sass": "styles/accordion.scss",
    }
  }
}

…またはパターンさえも

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./*.scss": {
      "sass": "styles/*.scss",
    },
  }
}