样式组件的 scss @import 等价物？

Question

我正在制作一个带有反应和样式化组件的可嵌入小部件，并想在我的主应用程序容器中进行大 CSS 重置。我将使用 cleanslate 中的样式来执行此操作，但我不想将其放入我的主要样式组件中，因为它有 400 行长。理想情况下，这些样式将存在于单独的 js 文件中，然后在 StyledApp 中我会执行类似于 scss' @import cleanslate.

的操作

我发现的建议包括单独调用 css 文件的 CDN 版本，但我不想这样做，原因有二：1. 不想要额外的性能受到影响，2。我想进行编辑。

有没有一种方法可以将所有这些样式导入我的主要 StyledApp 并将它们应用于该应用程序组件？

Answer 1

您可以使用 styled-components 中的 css 帮助程序声明 css 样式，然后在需要的地方调用它：

export const cleanSlateRules = css`
// styles
`;

export const StyledWhatever = styled.div`
  ${cleanSlateRules}
`;

编辑：事实证明这目前在产品中不起作用。我认为是因为与 @import 问题相同。

编辑 2：我使用样式组件的 babel 插件让它在生产中工作。此后成功应用了自定义 css。在这里查看我的回答：

样式组件的 scss @import 等价物？

Equivalent of scss @import for styled-components?

css

reactjs

styled-components