【问题标题】：How can I access postcss variables in styled components for media-query?如何访问样式化组件中的 postcss 变量以进行媒体查询？
【发布时间】：2019-03-19 04:09:06
【问题描述】：
我正在使用一个 CDN，它有一堆定义的 pcss 变量，我想在我的样式化组件中使用它们。我可以通过var(--color-green) 轻松使用颜色变量。但是，媒体查询变量似乎不起作用。有人知道为什么会这样吗？
这是我尝试过的，其中--media-query-max-small在cdn中定义为max-width: 647px
const comp = styled.div`
@media (var(--media-query-max-small)) { }
`
【问题讨论】：
标签：
reactjs
media-queries
styled-components
【解决方案1】：
作为 PostCSS 的创建者，我推荐使用astroturf。它是带有 styled-components API 的 CSS-in-JS 解决方案，但与 styled-component 相比，astroturf 没有运行时（SC 有 15 KB 运行时），仅在构建期间解析 CSS（SC 每次在客户端解析它) 并支持 PostCSS 和许多其他 CSS 工具。
在您的情况下，只需将 postcss-loader 用于 CSS，astroturf/loader 用于 JS 文件。一切都会好起来的。