Как добавить модуль bootstrap в приложение svelte JS? - PullRequest
Новая
       44

Как добавить модуль bootstrap в приложение svelte JS?

0 голосов
/ 21 января 2020

Я очень новичок в svelte (как и многие из нас ^^), и мне не удалось добавить bootstrap в мое приложение. Попытался запустить 'npm add bootstrap', но он сказал, что мне нужен peer jquery зависимости cie. Вот рендер терминала

Я не понимаю, почему пакет был добавлен, и я до сих пор не могу использовать классы bootstrap. Второй момент, почему это говорит о взаимных зависимостях? Какая ссылка здесь? Я не знаю, что я что-то упустил, но если вы, ребята, нашли решение, это очень поможет. Спасибо

npm добавить bootstrap

npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.

npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

+ bootstrap@4.4.1
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```

1 Ответ

2 голосов
/ 21 января 2020

Ваша проблема в том, что установка bootstrap в node_modules не включает автоматически файлы в вашем приложении. Есть несколько способов сделать это sh.

Вариант 1. Скопируйте файлы в /public вручную

  1. Загрузите файлы bootstrap и поместите их в папку public вашего проекта svelte.
  2. Добавьте ссылку css в public/index.html. <link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.

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

Вариант 2. Скопируйте файлы в /public, используя накопительный пакет

  1. установите накопительный плагин-копия
  2. Обновите rollup.config.js в включите плагин copy. Вот фрагмент важных частей из файла rollup.config. js из бесплатной установки fre sh. 
//...
import copy from 'rollup-plugin-copy'

export default {
    //...
    plugins: [
        //...
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),
       //...
    ],
    //...
};
Добавьте ссылку css в public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
...