使用vanilla-extract/css设置断点与媒体查询报错问题

你遇到的问题是因为CSS自定义属性（变量）不能直接用于媒体查询的条件中，浏览器在解析媒体查询时会先于CSS变量的求值，所以直接写@media var(--breakpoints-large)会被判定为无效语法。

错误原因 #

你用createGlobalTheme定义的断点会被编译成CSS变量（比如--breakpoints-large__gr35lg1），但媒体查询的min-width这类条件不支持引用变量，浏览器无法在媒体查询阶段解析变量值，因此抛出Invalid media query错误。

正确实现方式 #

方式一：使用vanilla-extract官方推荐的createMedia

这是最规范的做法，直接用createMedia定义断点集合，自动生成可复用的媒体查询规则：

// breakpoints.css.ts
import { createMedia } from '@vanilla-extract/css';

// 定义断点对应的媒体查询规则
export const media = createMedia({
  medium: 'screen and (min-width: 40em)',
  large: 'screen and (min-width: 64.06em)'
});

在组件样式中直接引用：

// test.css.ts
import { style } from '@vanilla-extract/css';
import { media } from './breakpoints.css.ts';

export const testStyle = style({
  padding: '1rem',
  // 大屏下的样式
  '@media': {
    [media.large]: {
      padding: '2rem'
    }
  }
});

方式二：保留createGlobalTheme但直接使用断点值

如果一定要用全局主题变量的方式，需要同时导出断点的原始值，在媒体查询中直接使用值而非变量：

// globalTheme.css.ts
import { createGlobalTheme } from '@vanilla-extract/css';

// 先定义断点常量
export const breakpointValues = {
  medium: '40em',
  large: '64.06em'
};

// 生成全局主题变量（用于其他非媒体查询场景）
export const globalTheme = createGlobalTheme(':root', {
  breakpoints: breakpointValues
});

在样式文件中直接拼接媒体查询：

// test.css.ts
import { style } from '@vanilla-extract/css';
import { breakpointValues } from './globalTheme.css.ts';

export const testStyle = style({
  padding: '1rem',
  '@media': {
    [`screen and (min-width: ${breakpointValues.large})`]: {
      padding: '2rem'
    }
  }
});

总结 #

不要尝试在媒体查询中直接引用CSS变量，这是CSS本身的限制，并非vanilla-extract的问题。优先使用createMedia来管理断点，或者直接使用断点的原始值构建媒体查询。

内容的提问来源于stack exchange，提问作者amu03