等效于样式组件的 scss @import？答案

【问题标题】：Equivalent of scss @import for styled-components?等效于样式组件的 scss @import？
【发布时间】：2022-04-26 17:37:40
【问题描述】：

我正在使用 react 和 styled-components 制作一个可嵌入的小部件，并希望在我的主应用容器中进行大型 CSS 重置。我将使用cleanslate 中的样式来做到这一点，但是我不想将它放到我的主要样式组件中，因为它有 400 行长。理想情况下，这些样式将存在于一个单独的 js 文件中，然后在 StyledApp 中我会做一些类似于 scss' @import cleanslate 的事情。

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

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

【问题讨论】：

可以选择编辑主题吗？
我可以在 styled-components 中编辑自己的主题，是的。但是，我需要使用干净的 CSS 基础，以确保我不会受到父网站上的样式的影响。

标签： css reactjs styled-components

【解决方案1】：

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

export const cleanSlateRules = css`
// styles
`;

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

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

编辑 2：我使用 babel 插件将其用于样式化组件。之后成功应用了自定义 css。在这里查看我的答案：styled-components only rendering certain styles after successful build with parcel

【讨论】：