postcss import
14.0.0
PostCSS 外掛程式透過內嵌內容來轉換
@import規則。
該外掛程式可以使用本地文件、節點模組或 web_modules。要解析@import規則的路徑，它可以查看根目錄（預設process.cwd() ）、 web_modules 、 node_modules或本機模組。導入模組時，它將在style或main欄位中尋找index.css或package.json中引用的檔案。您也可以手動提供多個要查看的路徑。
筆記：
該插件可能應該用作您清單中的第一個插件。這樣，其他外掛程式將在 AST 上工作，就好像只有一個檔案需要處理一樣，並且可能會按照您的預期工作。
在插件鏈中的 postcss-import 之後執行 postcss-url 將允許您在內聯匯入的檔案後調整資產url() （甚至內聯它們）。
為了最佳化輸出，該外掛程式只會在給定範圍（根、媒體查詢...）上匯入一次檔案。測試是根據匯入檔案的路徑和內容進行的（使用哈希表）。如果這種行為不是您想要的，請查看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-導入
除非您的樣式表位於執行 postcss ( process.cwd() ) 的相同位置，否則您將需要使用from選項來使相對導入運作。
// 依賴項const fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// 待處理的css const css = fs.readFileSync("css/input .css" , "utf8")// 處理 csspostcss()
.use(atImport())
.process(css, {// 這裡需要 `from` 選項 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"; */@導入“foo.css”； /* 根據上面的 `from` 選項相對於 css/ *//* 支援「url」值的所有標準表示法 */@import url(foo-1.css);@import url("foo-2. css ");@import "bar.css" (最小寬度: 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 的內容*/}主體{背景：黑色;
}查看測試以取得更多範例。
filter類型： Function
預設值：( () => true
僅轉換測試函數傳回true的導入。測試函數傳回false的導入將保持原樣。此函數會取得導入路徑作為參數，並應傳回一個布林值。
root類型： String
預設值： process.cwd()或from postcss 的目錄名
定義解析路徑的根（例如： node_modules所在的位置）。不應該使用那麼多。
注意：嵌套@import也將受益於導入檔案的相對目錄名。
path類型： String|Array
預設: []
在其中尋找文件的字串或路徑數組。
plugins類型： Array
預設值： undefined
要套用於每個導入檔案的一組插件。
resolve類型： Function
預設值： null
您可以使用此選項提供自訂路徑解析器。此函數取得(id, basedir, importOptions, astNode)參數，並應傳回一個路徑、路徑數組或解析為路徑的 Promise。如果您不返回絕對路徑，您的路徑將使用預設解析器解析為絕對路徑。您可以為此使用解析。
load類型： Function
預設值：空
您可以透過設定此選項來覆寫預設的載入方式。此函數取得(filename, importOptions)參數並傳回內容或承諾的內容。
skipDuplicates類型： Boolean
預設值： true
預設情況下，類似的文件（基於相同的內容）將被跳過。它是為了優化輸出並跳過類似的檔案（例如， normalize.css 。如果此行為不是您想要的，只需將此選項設為false即可停用它。
addModulesDirectories類型： Array
預設: []
若要新增至 Node 解析器的資料夾名稱陣列。數值將附加到預設解析目錄： ["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 運行程序使用。
⇄ Pull requests 和 ★ 永遠歡迎明星。
對於錯誤和功能請求，請建立問題。
拉取請求必須伴隨通過自動化測試（ $ npm test ）。
