升级postcss-custom-media至10.0.1后importFrom不支持报错求助

1. 替换依赖包 #

卸载旧的postcss-custom-media，安装官方推荐的替代工具postcss-preset-env：

npm uninstall postcss-custom-media
npm install postcss-preset-env --save-dev

2. 更新PostCSS配置 #

修改postcss.config.js，移除原postcss-custom-media插件，替换为postcss-preset-env，并通过标准语法注入自定义媒体查询：

module.exports = {
  plugins: {
    'postcss-nested': {},
    'postcss-preset-env': {
      features: {
        // 启用自定义媒体查询编译能力
        'custom-media-queries': true
      },
      importFrom: [
        {
          css: `
            @custom-media --m (min-width: 640px);
            @custom-media --t (min-width: 980px);
          `
        }
      ]
    }
  }
}

3. 项目代码无需改动 #

项目中已有的@media (--t)这类自定义媒体查询写法完全兼容，不需要做任何修改，直接重新构建即可正常运行。

关键说明 #

• postcss-custom-media v10+ 废弃了非标准的importFrom配置，转而遵循CSS原生的@custom-media语法规范。
• postcss-preset-env集成了包括自定义媒体查询在内的多种CSS新特性编译能力，是官方指定的替代方案。
• 上述配置通过importFrom直接注入全局自定义规则，无需额外创建全局CSS文件，实现最小成本的迁移。

内容的提问来源于stack exchange，提问作者Susitha Ravinda Senarath