为什么PostCSS处理@custom-media时报Unknown word错误？
我在用PostCSS处理CSS时遇到问题，当写@custom-media和CSS变量时，编译总报Unknown word错误。已经装了postcss-preset-env和autoprefixer。
配置文件是这样写的：
module.exports = {
plugins: {
'postcss-preset-env': {},
autoprefixer: {}
}
};
尝试过把@custom-media改成@media就正常了，但项目需要动态媒体查询。查了文档说是需要特定插件，但按网上的教程配了还是不行。
- 2
回答
89浏览
PostCSS处理CSS变量后浏览器显示未定义怎么办？
折腾了一下午也没搞定，我在用PostCSS处理CSS变量的时候遇到怪事。按照文档配置了postcss-custom-properties插件，但浏览器里调试发现变量还是显示为undefined。 我的...
- 2
回答
56浏览
PostCSS插件处理CSS变量时不起作用怎么办？
我在用PostCSS处理CSS变量时遇到了问题，明明配置了postcss-custom-properties插件，但页面里的变量还是没被解析。比如下面这个HTML里的--primary-color变量...
- 1
回答
33浏览
PostCSS 插件里怎么正确处理嵌套的 at-rule？
我写了个 PostCSS 插件想遍历所有的 @media 规则，但遇到嵌套的 @media 就出问题了。比如下面这种结构，插件只处理了外层，内层直接被忽略了： @media (min-width: 7...
- 2
回答
39浏览
PostCSS处理CSS变量时，为什么预处理器变量会被替换成初始值？
在用PostCSS处理CSS变量时遇到了奇怪的问题：--primary-color被替换成初始值#00f了，但代码里明明写的是Sass变量$primary，这是怎么回事？ 尝试过调整postcss-l...
- 1
回答
32浏览
PostCSS 自定义 parser 为什么没生效？
我试着用 PostCSS 写了个自定义 parser 来处理特殊的 CSS 注释语法，但配置完之后发现根本没走我写的 parser 逻辑。是不是哪里配置错了？ 我的 postcss.config.js...
- 1
回答
53浏览
PostCSS插件怎么处理HTML里的内联样式？
我写了个PostCSS插件想自动给CSS加前缀，但发现它只处理了单独的CSS文件，HTML里style属性的内联样式完全没被处理，这咋办？ 试过用posthtml配合postcss，但配置太复杂还报错...
- 1
回答
41浏览
PostCSS 处理媒体查询时为啥没生效？
我用 PostCSS 的 autoprefixer 插件处理 CSS，但写好的媒体查询在编译后完全没变化，也没报错，是不是我配置漏了啥？ 我的 CSS 里写了类似这样的代码：@media (max-w...
- 2
回答
45浏览
PostCSS处理AST时如何准确匹配特定CSS规则？
我最近在用 PostCSS 写一个插件，想只处理某些特定的 CSS 规则，比如 class 名包含 btn- 的选择器。但发现用 rule.selector.includes('btn-') 会误匹配...
- 2
回答
816浏览
postcss-modules 生成的类名为什么没被正确替换？
我用 PostCSS 配合 postcss-modules 处理 CSS 模块，但打包后发现 JS 里引用的样式类名还是原始名称，没有被替换成哈希后的名字。比如我写的是 styles.containe...
- 2
回答
48浏览
PostCSS 处理媒体查询时为啥没生效？
我用 PostCSS 的 autoprefixer 插件处理 CSS，但写好的媒体查询在编译后完全没加前缀，也没报错，是配置漏了什么吗？ 我的 PostCSS 配置文件里只加了 autoprefixe...
首先，@custom-media是CSS的未来特性，postcss-preset-env需要明确告诉它要转换这个语法。你需要修改配置文件：
为什么这样配？因为postcss-preset-env默认只开启部分polyfill，为了减少打包体积。custom-media-queries属于Stage 2的提案，需要手动开启。
还有一个常见坑点是语法格式要正确。正确的@custom-media写法应该是：
需要注意几点：
1. 定义时要用--前缀，这是CSS自定义属性的规范
2. 使用时也要带--前缀
3. 记得用括号包裹条件表达式
如果还报错，检查下你的PostCSS版本，建议用最新版。我之前用7.x版本也遇到过奇怪的问题，升级到8.x就正常了。
顺便吐槽下，CSS这些未来语法真的很折腾，每次都要查兼容性。不过一旦配好了，用起来确实爽，特别是项目里有很多响应式断点时。
@custom-media语法，虽然你用了 postcss-preset-env，但它默认的 stage 配置可能没开到支持实验性语法。@custom-media属于比较新的 CSS 规范，需要明确启用。postcss-preset-env 默认只处理 stage 2+ 的特性，而 custom media 查询在早期是 stage 3，但实际使用时经常因为 parser 解析不到直接报 “Unknown word”。解决方法很简单：修改配置，显式开启
features或调整stage。改成这样：
重点是加上
features: { 'custom-media-queries': true }，这样强制启用 custom media 支持。有时候光靠 stage 3 也不保险，插件层面得打个补丁。另外确认一下你用的 postcss-preset-env 版本，老版本（比如 6.x 以下）对 custom-media 支持不完整，建议升级到最新版：
顺便提一句，这类问题服务端构建流程最容易踩坑，本地开发能跑不代表 CI 能过，版本一乱就炸。建议锁版本 + 提前在 pipeline 验证。