Импортировать bootstrap css в createGlobalStyles?

Question

Я создаю библиотеку компонентов реагирования со стилизованными компонентами. У меня есть <GlobalStyles /> компонент для проектов, использующих библиотеку. В SASS, из которого я выполняю миграцию, у меня был файл root index.scss, внутри которого я делал:

@import '~bootstrap/scss/bootstrap';

Я понял, что не могу просто поместить это в свои глобальные стили:

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

Как я могу убедиться, что любой проект, включая <GlobalStyles />, также получит таблицы стилей bootstrap?

Answer 1

Невозможно импортировать таблицу стилей bootstrap s css без ее обработки по понятным причинам.

Но вы можете импортировать таблицу стилей bootstrap. К сожалению, createGlobalStyle не обрабатывает этот импорт, так как основной импорт CSSDOM не обрабатывает это хорошо. Самой простой реализацией было бы импортирование файлов bootstrap 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 и запросить DOM перед добавлением нового.