Импортировать CSS в node_modules для svelte

Question

Я хочу использовать CSS-фреймворк в моем проекте svelte, в данном случае это был uikit.

Я установил его с yarn add uikit

И, конечно, мне нужно импортировать CSSфайл, с

@import '../node_modules/uikit/dist/css/uikit.min.css"

Но это не работает, куда бы я ни импортировал этот

• стиль App.svelte
• Внутри глобальных.css
• Использование тега внутри index.html

Это еще не доступно?

Или я должен установить это с помощью пряжи, и после этого мне нужно скопировать нужный файл во внешние node_modules, как [это решение]? ( Как добавить CSS из node_modules в template.html в Svelte)

Я думаю, что это не ограничение только для uikit, а способ, которым мы импортируем сторонний файл css из node_modules в приложение svelte

Answer 1

1. Установите плагин накопительного пакета CSS:

   npm install -D rollup-plugin-css-only

2. Перейдите в rollup.config.js и настройте его, добавив установленный плагин в список плагинов с выходным параметром, где значением является файл css. Позже этот файл будет создан в вашей общей папке, и содержимое исходного файла CSS будет скопировано в него:

   css ({output: "public / uikit.css"})

3. Перейдите на index.html и добавьте ссылку на ваш файл в раздел head:

4. импортировать оригинальный css-файл webkit в тег script вашего компонента Svelte:

   import "../node_modules/uikit/dist/css/uikit.min.css";

Решение не мое. Все кредиты идут на этого парня (около 6:00 в видео): https://www.youtube.com/watch?v=RBQg89ak_NY

Answer 2

Так что, если вы хотите использовать UIKit, я бы посмотрел информацию на домашней странице.

Из HTML-разметки во введении на сайте UIKit:

Вам нужно добавить:

    <link rel="stylesheet" href="css/uikit.min.css" />

в заголовок вашего html-файла.

Так что в вашем случае вы можете указать на папку node_modules, например

<link rel="stylesheet" href="../node_modules/uikit/dist/css/uikit.min.css" />

вВаш шаблон.

Answer 3

Не знаком с UI kit, но из предоставленной информации мне кажется, что вы должны импортировать (используя @import) его внутри файла scss или sass, а не файла css.Использование @import в файле css не интерпретируется, но, как вы можете видеть, просто отображается в вашем браузере как ссылка на файл в каталоге node_modules, который недоступен для браузера.

Предполагая, что вы используете накопительный пакет, для обработки scss файлов вам, вероятно, потребуется добавить зависимость svelte-preprocess-sass для накопительного пакета для поддержки sass (и scss).

https://github.com/ls-age/svelte-preprocess-sass