【问题标题】:How can I opt for React Styled-Components to generate a physical CSS file?如何选择 React Styled-Components 来生成物理 CSS 文件?
【发布时间】:2017-12-08 13:17:43
【问题描述】:

我需要将提供给 styled-components 的 CSS 输出到我的 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",

【问题讨论】:

    标签: reactjs webpack babeljs styled-components


    【解决方案1】:

    目前这是不可能/不支持的。提取静态样式非常困难,例如考虑函数插值:

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

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

    我们目前正在调查和试验以找出最佳方法。现在看看我们的Babel plugin,看看在编译阶段有一些事情正在处理!

    【讨论】:

    • 感谢您的回复,朋友。我结束了后处理(在运行时,puke)附加到<head><style> 标记作为临时解决方案。
    • @ColtonColcleasure 你到底做了什么作为解决方案?我想将它与 netlify cms > netlifycms.org/docs/customization 和 Styled 组件中的预览组件一起使用。但它需要一个 css 文件..
    猜你喜欢
    • 2019-12-22
    • 1970-01-01
    • 2021-01-03
    • 2021-04-06
    • 2021-12-11
    • 2020-11-03
    • 2021-04-13
    • 2018-08-16
    • 2023-03-24
    相关资源
    最近更新 更多