postcss 在 webstorm 中需本地安装、配置文件置于项目根目录、外部工具参数顺序正确——三者缺一即静默失败；postcss.config.js 必须在 $projectfiledir$ 下，内容用模块导出插件数组，禁用内联 browserslist 配置。
PostCSS 在 WebStorm 里不需要“额外装插件”就能用，但必须本地安装、配置文件放对位置、外部工具参数顺序写对——三者错一个，就静默失败。
postcss.config.js 必须放在项目根目录
WebStorm（以及 webpack、postcss-cli）只认 $ProjectFileDir$ 下的 postcss.config.js。放在子目录、重命名、或用 .postcssrc 都会被忽略。
- 正确路径：
your-project-root/postcss.config.js - 内容示例（PostCSS 8+ 写法）：
module.exports = { plugins: [ require('autoprefixer'), require('postcss-nested') ] } - 如果用
require('autoprefixer')({ overrideBrowserslist: [...] })，新版 PostCSS 已废弃该写法，且 WebStorm 外部工具不执行它
别全局安装 postcss-cli 和 autoprefixer
全局安装（npm install -g postcss-cli autoprefixer）会导致版本错位，尤其当项目里用了 postcss-loader 时，Autoprefixer 可能根本读不到 browserslist 配置。
- ✅ 正确做法：在项目根目录运行
npm install postcss postcss-cli autoprefixer --save-dev - ⚠️ 检查是否装对：运行
npx postcss --version和npx autoprefixer --version，应返回版本号，而非“command not found” - 找不到
postcss.cmd？在终端执行where postcss（Windows）或which postcss（macOS/Linux），复制完整路径填进 WebStorm External Tools 的Program栏
External Tools 参数顺序不能错
postcss-cli 对输入/输出位置极其敏感。参数顺序错了，要么报错，要么直接覆盖源文件（比如把 .pcss 覆盖成空 .css）。
- ✅ 正确参数（处理当前
.pcss，输出同名.css）：-u autoprefixer -u postcss-nested -o $FileDir$/$FileNameWithoutExtension$.css $FilePath$ - ❌ 错误写法：
$FilePath$ -u autoprefixer -o ...（输入文件放最后）、或漏掉$FilePath$（无输入，无报错，无输出） -
Working directory必须设为$ProjectFileDir$，否则插件可能找不到postcss.config.js
browserslist 配置不生效？检查 package.json 或 .browserslistrc
Autoprefixer 加不加前缀、加哪些前缀，完全由 browserslist 决定——它不看 postcss.config.js 里的内联配置，也不读 WebStorm 设置。
- ✅ 推荐方式：在
package.json里加字段："browserslist": ["> 1%", "last 2 versions", "not dead"]
- ✅ 备选方式：项目根目录新建
.browserslistrc文件，内容同上 - ❌ 不要写在
postcss.config.js里，例如require('autoprefixer')({ overrideBrowserslist: [...] })—— 这在 PostCSS 8+ 中已失效，且 WebStorm 外部工具不会加载它
最容易被忽略的是：所有路径都依赖 $ProjectFileDir$ 这个变量，而它只在项目以“Open Folder”方式打开时才稳定指向根目录；如果用 “Add Content Root” 添加多模块，每个模块得各自有 postcss.config.js 和 package.json，否则配置会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
