# postcss-load-config 中文文档 规范地址：https://npmcn.com/package/postcss-load-config/ 版本：6\.0\.1 npm 元数据更新时间：2024-06-02T19:02:03.980Z 中文译文更新时间：2026-11-05T16:26:56.840Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/postcss-load-config 原文对照：https://npmcn.com/package/postcss-load-config/?lang=original 项目主页：https://github.com/postcss/postcss-load-config#readme 源码仓库：https://github.com/postcss/postcss-load-config ## 关键信息（来自 npm 元数据） - 包体积（解压后）：22.7 kB，8 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - Node.js 要求：\>= 18 - 运行依赖：1 个 - peer 依赖：jiti \>=1\.21\.0，postcss \>=8\.0\.9，tsx ^4\.8\.1，yaml ^2\.4\.2 - 首次发布：2016-06-01T14:46:24.520Z - 最新版本发布：2024-06-02T19:02:03.793Z - 近 30 天下载量：227205532（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：30（近 12 个月 0 个） ## 中文简介 PostCSS 自动装入配置 ## 安装 ```sh npm install postcss-load-config ``` 也可以使用：`pnpm add postcss-load-config`、`yarn add postcss-load-config`、`bun add postcss-load-config` ## README ![](http://michael-ciniawsky.github.io/postcss-load-options/logo.svg "Load Options") [![](http://postcss.github.io/postcss/logo.svg "PostCSS") ](https://github.com/postcss/postcss)![](http://michael-ciniawsky.github.io/postcss-load-plugins/logo.svg "Load Plugins") # 装入配置 ## 安装 ```bash npm i -D postcss-load-config ``` ## 使用量 ```bash npm i -S|-D postcss-plugin ``` 安装所有所需的 PostCSS 插件并将其保存到您 **软件包.json** `dependencies`编号 :`devDependencies` 然后通过选择以下格式之一创建 PostCSS 配置文件 ### `package.json` 创建一个 **`postcss`** 在您的项目中 **`package.json`** ``` Project (Root) |– client |– public | |- package.json ``` ```json { "postcss": { "parser": "sugarss", "map": false, "plugins": { "postcss-plugin": {} } } } ``` ### `.postcssrc` 创建一个 **`.postcssrc`** 以 JSON 或 YAML 为格式的文件 > 建议使用扩展名(例如: **`.postcssrc.json`** 或者说 **`.postcssrc.yml`**改为 `.postcssrc` ``` Project (Root) |– client |– public | |- (.postcssrc|.postcssrc.json|.postcssrc.yml) |- package.json ``` **`.postcssrc.json`** ```json { "parser": "sugarss", "map": false, "plugins": { "postcss-plugin": {} } } ``` **`.postcssrc.yml`** ```yaml parser: sugarss map: false plugins: postcss-plugin: {} ``` > \[注\] 对于YAML配置, 你一定有 [雅姆尔](https://www.npmjs.com/package/yaml) 作为对等依赖安装. ### `.postcssrc.js` 或者说 `postcss.config.js` 你可能需要一些逻辑 在你的配置. 在这种情况下,创建JS/TS文件,命名为: - `.postcssrc.js` - `.postcssrc.mjs` - `.postcssrc.cjs` - `.postcssrc.ts` - `.postcssrc.mts` - `.postcssrc.cts` - `postcss.config.js` - `postcss.config.mjs` - `postcss.config.cjs` - `postcss.config.ts` - `postcss.config.mts` - `postcss.config.cts` > \[注\] 对于 TypeScript 配置, 您必须有 [tx](https://www.npmjs.com/package/tsx) 或者说 [吉地语](https://www.npmjs.com/package/jiti) 作为对等依赖安装. ``` Project (Root) |– client |– public |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|mts|cts) |- package.json ``` 您可以导出配置为 `{Object}` **. postcsrc.js (中文(简体) )** ```js module.exports = { parser: 'sugarss', map: false, plugins: { 'postcss-plugin': {} } } ``` 或者导出一个 `{Function}` 返回配置(更多关于 `ctx` (见下文) **. postcsrc.js (中文(简体) )** ```js module.exports = (ctx) => ({ parser: ctx.parser ? 'sugarss' : false, map: ctx.env === 'development' ? ctx.map : false, plugins: { 'postcss-plugin': ctx.options.plugin } }) ``` 插件可以使用 `{Object}` 或一个 `{Array}` #### `{Object}` **. postcsrc.js (中文(简体) )** ```js module.exports = ({ env }) => ({ ...options, plugins: { 'postcss-plugin': env === 'production' ? {} : false } }) ``` > i️ 当使用 `{Object}`,键可以是节点.js模块名,与PostCSS配置文件目录相对的JavaScript文件路径,也可以是JavaScript文件的绝对路径. #### `{Array}` **. postcsrc.js (中文(简体) )** ```js module.exports = ({ env }) => ({ ...options, plugins: [ env === 'production' ? require('postcss-plugin')() : false ] }) ``` > :警告: 当使用时 `{Array}`,确保 `require()` 每个插件 ## 选项 | 名称 | 类型 | 默认 | 说明 | | :-: | :-: | :-: | :-- | | [**`to`**](https://npmcn.com/package/postcss-load-config/#readme-to) | `{String}` | `undefined` | 目标文件路径 | | [**`map`**](https://npmcn.com/package/postcss-load-config/#readme-map) | `{String|Object}` | `false` | 启用/ 残疾源地图 | | [**`from`**](https://npmcn.com/package/postcss-load-config/#readme-from) | `{String}` | `undefined` | 源文件路径 | | [**`parser`**](https://npmcn.com/package/postcss-load-config/#readme-parser) | `{String|Function}` | `false` | 自定义 PostCSS 解析器 | | [**`syntax`**](https://npmcn.com/package/postcss-load-config/#readme-syntax) | `{String|Function}` | `false` | 自定义 PostCSS 语法 | | [**`stringifier`**](https://npmcn.com/package/postcss-load-config/#readme-stringifier) | `{String|Function}` | `false` | 自定义 PostCSS 字符串 | ### `parser` **. postcsrc.js (中文(简体) )** ```js module.exports = { parser: 'sugarss' } ``` ### `syntax` **. postcsrc.js (中文(简体) )** ```js module.exports = { syntax: 'postcss-scss' } ``` ### `stringifier` **. postcsrc.js (中文(简体) )** ```js module.exports = { stringifier: 'midas' } ``` ### [**`map`**](https://github.com/postcss/postcss/blob/master/docs/source-maps.md) **. postcsrc.js (中文(简体) )** ```js module.exports = { map: 'inline' } ``` > :警告:在大多数情况下 `options.from` && `options.to` 由整合此软件包的第三方(CLI、gulp、webpack)设定。 不需要设置/使用 `options.from` && `options.to` 在配置文件中。 除非你是直接使用此模块及其节点API的第三方插件作者 **不要设置 `options.from` && `options.to` 你自己来** ### `to` ```js module.exports = { to: 'path/to/dest.css' } ``` ### `from` ```js module.exports = { from: 'path/to/src.css' } ``` ## 插件 ### `{} || null` 插件将装入默认值 ```js 'postcss-plugin': {} || null ``` **. postcsrc.js (中文(简体) )** ```js module.exports = { plugins: { 'postcss-plugin': {} || null } } ``` > : 警告: `{}` 一定是个 **空** `{Object}` 字义 ### `{Object}` 插件将被装入给定选项 ```js 'postcss-plugin': { option: '', option: '' } ``` **. postcsrc.js (中文(简体) )** ```js module.exports = { plugins: { 'postcss-plugin': { option: '', option: '' } } } ``` ### `false` 未装入插件 ```js 'postcss-plugin': false ``` **. postcsrc.js (中文(简体) )** ```js module.exports = { plugins: { 'postcss-plugin': false } } ``` ### `Ordering` 插件 **执行命令** 由插件区域中的声明决定(**从上而下**(中文(简体) ) ```js { plugins: { 'postcss-plugin': {}, // [0] 'postcss-plugin': {}, // [1] 'postcss-plugin': {} // [2] } } ``` ## A. 背景情况 当使用一个 `{Function}` (单位:千美元)`postcss.config.js` 或者说 `.postcssrc.js`),可以将上下文传递给 `postcss-load-config`,在装入您的配置时将对其进行评估。 默认 `ctx.env (process.env.NODE_ENV)` 财务报告和审定财务报表 `ctx.cwd (process.cwd())` 可在 `ctx` `{Object}` > i️ 多数第三方合并在 `ctx` (例如 `postcss-loader`) (中文(简体) ). 请检查date=中的日期值 (帮助) `ctx` ## 实例 **邮编. config.js** ```js module.exports = (ctx) => ({ parser: ctx.parser ? 'sugarss' : false, map: ctx.env === 'development' ? ctx.map : false, plugins: { 'postcss-import': {}, 'postcss-nested': {}, cssnano: ctx.env === 'production' ? {} : false } }) ``` ![](https://worldvectorlogo.com/logos/nodejs-icon.svg) ```json "scripts": { "build": "NODE_ENV=production node postcss", "start": "NODE_ENV=development node postcss" } ``` ```js const { readFileSync } = require('fs') const postcss = require('postcss') const postcssrc = require('postcss-load-config') const css = readFileSync('index.css', 'utf8') const ctx = { parser: true, map: 'inline' } postcssrc(ctx).then(({ plugins, options }) => { postcss(plugins) .process(css, options) .then((result) => console.log(result.css)) }) ``` ![](https://worldvectorlogo.com/logos/gulp.svg) ```json "scripts": { "build": "NODE_ENV=production gulp", "start": "NODE_ENV=development gulp" } ``` ```js const { task, src, dest, series, watch } = require('gulp') const postcss = require('gulp-postcssrc') const css = () => { src('src/*.css') .pipe(postcss()) .pipe(dest('dest')) }) task('watch', () => { watch(['src/*.css', 'postcss.config.js'], css) }) task('default', series(css, 'watch')) ``` ![](https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg) ```json "scripts": { "build": "NODE_ENV=production webpack", "start": "NODE_ENV=development webpack-dev-server" } ``` **网络包装. config.js** ```js module.exports = (env) => ({ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] } ] } }) ``` ## 维护者

迈克尔·西尼奥夫斯基
马特乌什·德克
## 贡献者

瑞安·邓克尔
帕特里克·吉尔代
道尔顿·桑托斯
弗朗索瓦·伍特斯
安全联系人 请使用 [电梯安全联络](https://tidelift.com/security)。 。 。 . Tidelift将协调固定和披露. ## 常见问题 ### postcss-load-config 是什么？ PostCSS 自动装入配置 ### 如何安装 postcss-load-config？ 在项目目录运行 npm install postcss-load-config，或使用 pnpm add / yarn add / bun add。 ### postcss-load-config 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### postcss-load-config 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### postcss-load-config 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>= 18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### postcss-load-config 可以商用吗？ postcss-load-config 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### postcss-load-config 的下载量有多少？ 根据 npm 官方下载统计，postcss-load-config 在 2026/10/07 – 2026/11/05 这 30 天内被下载 227,205,532 次，日均约 7,573,518 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### postcss-load-config 还在维护吗？ 最新版本 6\.0\.1 发布于 2024/06/03（2 年前）；至今共发布 30 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/06/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。