postcss import
14.0.0
コンテンツをインライン化することで
@importルールを変換する PostCSS プラグイン。
このプラグインは、ローカル ファイル、ノード モジュール、または web_modules を使用できます。 @importルールのパスを解決するには、ルート ディレクトリ (デフォルトではprocess.cwd() )、 web_modules 、 node_modulesまたはローカル モジュールを調べます。モジュールをインポートするとき、 styleフィールドまたはmainフィールドで、 index.cssまたはpackage.jsonで参照されているファイルが検索されます。参照する複数のパスを手動で指定することもできます。
注:
このプラグインはおそらくリストの最初のプラグインとして使用する必要があります。こうすることで、他のプラグインは、処理するファイルが 1 つだけであるかのように AST 上で動作し、おそらく期待どおりに動作するでしょう。
プラグインチェーンで postcss-import の後に postcss-url を実行すると、インポートされたファイルをインライン化した後にアセットurl()を調整 (またはインライン化することも) できます。
出力を最適化するために、このプラグインは特定のスコープ (ルート、メディア クエリなど) でファイルを 1 回だけインポートします。テストは、インポートされたファイルのパスと内容から行われます (ハッシュ テーブルを使用)。この動作が望ましくない場合は、 skipDuplicatesオプションを確認してください。
Glob Importsを探している場合は、 postcss-import-ext-glob を使用して postcss-import を拡張できます。
リモート ソースをインポートする場合は、postcss-import-url をdataUrlsプラグイン オプションとともに使用して、postcss-import を拡張できます。
( options.filterによって、またはリモート インポートであるために) 変更されていないインポートは、出力の先頭に移動されます。
このプラグインは、CSS @import仕様に従おうとします。 @importステートメントは、他のすべてのステートメント ( @charsetを除く) よりも前に置く必要があります。
$ npm install -D postcss-import
スタイルシートが postcss ( process.cwd() ) を実行する場所と同じ場所にない限り、相対インポートを機能させるにはfromオプションを使用する必要があります。
// 依存関係const fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// 処理されるCSSconst css = fs.readFileSync("css/input.css") , "utf8")// csspostcss() を処理します
.use(atImport())
.process(css, {// ここからは `from` オプションが必要です: "css/input.css"
})
.then((結果) => {const 出力 = result.cssconsole.log(出力)
}) css/input.css :
/* リモート URL は保持されます */@import "https://example.com/styles.css";/* `node_modules`、`web_modules`、またはローカル モジュールを使用できます */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* 上記の `from` オプションに従って css/ に相対 *//* "url" 値のすべての標準表記がサポートされます */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (min-width: 25em);@import 'baz.css' レイヤー(baz-layer);body { 背景: 黒;
}あなたに与えます：
@import "https://example.com/styles.css";/* ... ../node_modules/cssrecipes-defaults/index.css の内容 *//* ... ../node_modules/normalize の内容.css/normalize.css *//* ... css/foo.css の内容 *//* ... css/foo-1.css の内容 *//* ... 内容css/foo-2.css の */@media (min-width: 25em) {/* ... css/bar.css の内容 */}@layer baz-layer {/* ... css/ の内容baz.css */}body {背景:黒;
}他の例については、テストを確認してください。
filterタイプ: Function
デフォルト: () => true
テスト関数がtrueを返すインポートのみを変換します。テスト関数がfalseを返すインポートはそのまま残されます。この関数はインポートするパスを引数として取得し、ブール値を返す必要があります。
rootタイプ: String
デフォルト: process.cwd()またはpostcss fromディレクトリ名
パスを解決するルートを定義します（例： node_modulesがある場所）。そんなに使わないほうがいいですよ。
注: ネストされた@importインポートされたファイルの相対ディレクトリ名をさらに活用します。
pathタイプ: String|Array
デフォルト： []
ファイルを検索する場所の文字列またはパスの配列。
pluginsタイプ: Array
デフォルト: undefined
インポートされた各ファイルに適用されるプラグインの配列。
resolveタイプ: Function
デフォルト: null
このオプションを使用してカスタム パス リゾルバーを提供できます。この関数は(id, basedir, importOptions, astNode)引数を取得し、パス、パスの配列、またはパスに解決される Promise を返す必要があります。絶対パスを返さない場合、パスはデフォルトのリゾルバーを使用して絶対パスに解決されます。これには解決を使用できます。
loadタイプ: Function
デフォルト: null
このオプションを設定すると、デフォルトの読み込み方法を上書きできます。この関数は(filename, importOptions)引数を取得し、コンテンツまたは約束されたコンテンツを返します。
skipDuplicatesタイプ: Boolean
デフォルト: true
デフォルトでは、（同じコンテンツに基づく）類似のファイルはスキップされます。これは、出力を最適化し、たとえばnormalize.cssなどの類似したファイルをスキップするためです。この動作が望ましくない場合は、このオプションをfalseに設定して無効にしてください。
addModulesDirectoriesタイプ: Array
デフォルト： []
ノードのリゾルバーに追加するフォルダー名の配列。値はデフォルトの解決ディレクトリ["node_modules", "web_modules"]に追加されます。
このオプションは、デフォルトのリゾルバーに追加のディレクトリを追加するためのみです。上記のresolve構成オプションを介して独自のリゾルバーを提供した場合、この値は無視されます。
warnOnEmptyタイプ: Boolean
デフォルト: true
デフォルトでは、 postcss-import空のファイルがインポートされると警告します。
この警告を無効にするには、このオプションをfalseに設定します。
const postcss = require("postcss")const atImport = require("postcss-import")postcss()
.use(atImport({パス: ["src/css"],
}))
.process(cssString)
.then((結果) => {const { css } = 結果
})dependencyメッセージのサポートpostcss-import @importごとにメッセージをresult.messagesに追加します。メッセージの形式は次のとおりです。
{
type: 'dependency',
file: absoluteFilePath,
parent: fileContainingTheImport
}これは主に、ファイル監視を実装する postcss ランナーによって使用されます。
⇄ プルリクエストや★スターはいつでも大歓迎です。
バグや機能リクエストについては、問題を作成してください。
プル リクエストには、自動テスト ( $ npm test ) に合格する必要があります。
