reactjs - 如何访问媒体查询样式组件中的 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 。它是带有 styled-components API 的 CSS-in-JS 解决方案，但与 styled-component 相比，astroturf 没有运行时(SC 有 15 KB 运行时)，仅在构建期间解析 CSS(SC 每次在客户端解析它) )并支持 PostCSS 和许多其他 CSS 工具。

在你的例子中，只需为 CSS 文件添加 postcss-loader ，为 JS 文件添加 astroturf/loader 。一切都会顺利。