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

Question

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

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

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

Answer 1

作为PostCSS的创建者，我推荐使用astroturf。它是带有样式组件API的CSS- in -JS解决方案，但与样式组件相比，astroturf没有运行时(SC有15KB的运行时)，只在构建期间解析CSS (SC每次在客户端解析它)，并支持PostCSS和许多其他CSS工具。

在您的例子中，只需将CSS放入postcss-loader，JS文件放入astroturf/loader。一切都会好起来的。