Как использовать трафарет со сторонней библиотекой CSS

Question

Я пробую stenciljs в первый раз.Я хочу создать небольшое приложение, а не просто повторно используемый веб-компонент.

У меня вопрос, есть ли возможность добавить стороннюю библиотеку CSS, такую ​​как Bootstrap , Skeleton или Bulma в мое приложение.

Я пробовал следующие вещи, но ни одна из них, похоже, не работает:

Пример 1:

Простое добавление CDN <link rel="stylesheet" href="link-here"> в index.html не сработало.

Пример 2:

Я установил библиотеку Bulma CSS с npm и попытался импортировать ее в файл app.css следующим образом:

@import "../../node_modules/bulma/css/bulma.min.css";

или

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");

В документах говорится, что app.css для глобальных стилей.Но этот метод тоже не работал.

Как добавить стороннюю библиотеку CSS в мой трафаретный проект?

Answer 1

В дополнение к решению от JiiB, как настроить глобальную таблицу стилей app.css:

1. Создайте файл app.css в каталоге src, например, на /src/global/app.css
2. Добавить globalStyle: 'src/global/app.css' к объекту config в /stecnil.config.ts

3. Включить сгенерированный файл CSS из /build/app.css в /src/index.html:

   <link href="/build/app.css" rel="stylesheet">
   

Answer 2

Возможно, есть лучший способ, но для этой проблемы можно быстро импортировать библиотеку CSS третьей стороны в каждый файл css компонента.

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");