Vite+LightningCSS配置@custom-media后报错问题排查

数据老陈

2026-6-28

问题排查与解决方案

可能的配置问题及修复步骤

1. 确认Vite配置中正确集成LightningCSS并启用customMedia

检查你的vite.config.js/vite.config.ts，确保正确配置LightningCSS插件且明确开启customMedia特性，同时避免与Vite默认PostCSS处理冲突：

import { defineConfig } from 'vite';
import lightningcss from 'vite-plugin-lightningcss';

export default defineConfig({
  plugins: [
    lightningcss({
      browserslist: 'last 2 versions',
      features: {
        customMedia: true, // 必须显式开启该特性
      },
    }),
  ],
  css: {
    postcss: false, // 禁用默认PostCSS处理，避免冲突
  },
});

2. 确保`media.css`被正确导入到使用场景

如果业务样式文件未导入media.css，LightningCSS编译时会找不到--medium-screen的定义。可以：

在主样式文件（如main.css）开头导入：

@import './media.css';

/* 使用自定义媒体查询 */
@media (--medium-screen) {
  /* 样式内容 */
}

或在入口JS/TS文件中全局导入：

import './media.css';
import './main.css';

3. 检查文件作用域与语法细节

若使用CSS模块化（.module.css），不要将media.css设为模块化文件，否则自定义媒体查询会被隔离，无法全局使用。
确认media.css中语法无拼写错误：@custom-media --medium-screen (width <= 768px);的写法是正确的，但注意CSS变量区分大小写，使用时要和定义完全一致。