在 createGlobalStyles 中导入引导 css？

Question

我正在构建一个带有样式组件的反应组件库。我有一个 <GlobalStyles /> 组件用于使用该库的项目。在我要迁移的 SASS 中，我有一个根 index.scss 文件，我正在其中做：

@import '~bootstrap/scss/bootstrap';

我知道我不能只把它放在我的全局样式中：

import { createGlobalStyle } from "styled-components"
const GlobalStyles = createGlobalStyle`
  @import '~bootstrap/scss/bootstrap';
`

如何确保包括<GlobalStyles /> 在内的任何项目也将收到引导样式表？

Answer 1

由于显而易见的原因，您无法在不处理它的情况下导入引导程序 scss 样式表。

但是您可以导入引导样式表。不幸的是，createGlobalStyle 不能处理这些导入，因为底层的 CSSDOM 导入不能很好地处理这些。最简单的实现是将引导 CSS 文件导入到您的库中，例如：

import 'bootstrap/dist/css/bootstrap.min.css';

但请注意，这将生成一个额外的 CSS 文件，您的库的用户也必须包含与此类似的内容。

如果您想动态创建它，可以尝试从 CDN 添加它。

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const head = document.head;
    const link = document.createElement('link');
    link.href = `https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css`;
    link.rel = `stylesheet`;
    head.append(link);
  }, []);
}

但考虑到这些必须包含在所有组件中，但不应包含多次。一种方法是向link 标签添加一个ID，并在添加新标签之前查询DOM。