如何访问样式化组件中的postcss变量以进行媒体查询？

Question

我正在使用CDN，它具有一堆已定义的pcss变量，我想在样式化组件中使用。我可以通过var(--color-green)轻松使用颜色变量。但是，媒体查询变量似乎不起作用。有人知道为什么会这样吗？

这是我尝试过的方法，其中--media-query-max-small在CDN中定义为max-width: 647px

const comp = styled.div`
  @media (var(--media-query-max-small)) { }
`

Answer 1

作为PostCSS的创建者，我建议使用astroturf。它是具有样式组件API的CSS-in-JS解决方案，但是与样式组件相反，astroturf没有运行时（SC具有15 KB运行时），仅在构建期间解析CSS（SC每次在客户端上对其进行解析） ），并支持PostCSS和许多其他CSS工具。

对于您而言，只需将postcss-loader用于CSS，将astroturf/loader用于JS文件。一切都会正常。