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（最小宽度： 25em) {/* ... css/bar.css 的内容 */}@layer baz-layer {/* ... css/baz.css 的内容 */}body { 背景: 黑色;
}查看测试以获取更多示例。
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 ）。
