如何选择React Styled-Components来生成物理CSS文件？

Question

我需要提供的CSS styled-components输出到我的public/css目录中的物理CSS文件.

export const MyComp = styled.div`
  width: 100%;
  height: 500px;
`

与所有其他样式组件的样式一起,上面的组件将输出到public/css/styled.css:

.Components_MyComp__a39t9ag0248f {
  width: 100%;
  height: 500px;
}

我在用:

"webpack": "^2.6.1",
"styled-components": "^2.0.1",

Answer 1

目前无法/支持此功能.提取静态样式非常困难,例如考虑函数插值:

const Test = styled.div`
  color: ${props => props.color};
`

我们如何提取这个？我们只能提取CSS的静态部分,但是有很多边缘情况和约束使得这很难构建.

我们目前正在调查和试验以找出最佳方法.现在查看我们的Babel插件,看看在编译时步骤正在进行的一些事情!