样式组件的scss@import等价物

Question

我正在制作一个带有react和样式组件的可嵌入小部件，并希望在我的主应用程序容器中进行大规模的CSS重置。我将使用cleanslate中的样式来实现这一点，但我不想把它放在我的主要样式组件中，因为它有400行长。理想情况下，这些样式将存在于一个单独的js文件中，然后在StyledApp中，我将执行与scs的@import cleanslate类似的操作。

我发现的建议包括单独调用css文件的CDN版本，但我不想这样做有两个原因：1。不要额外的表演，2。我想进行编辑。

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

Answer 1

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

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

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

第2版：我在生产中使用了风格组件的babel插件。自定义css在此之后成功应用。在这里看到我的答案：使用包裹成功构建后，样式组件仅呈现某些样式