Как импортировать библиотеку Bootstrap в приложение Kotlin-React-App

Question

Как импортировать библиотеку Bootstrap в приложение Kotlin-React-App

Прямо сейчас я изучаю Kotlin для интерфейса, я создал приложение Kotlin React, используя

npx create-react-kotlin-app my-app

Затем я попытался импортировать Bootstrap, используя импорт, например

@file:JsModule("node_modules/boostrap/bootsrap.js")
external class Boostrap {}

тогда

в App.kt функция рендеринга

     override fun RBuilder.render() {
        div("container") {
            appHeader()
            p("App-intro") {+
                "This is body"
            }
            p("App-ticker") {
                ticker()
            }
        }
    }

Я добавил начальную загрузку с помощью команды npm install, но файлы начальной загрузки не загружаются в пользовательский интерфейс. Не могли бы вы помочь мне загрузить бутстрап?

3

reactjs node.js kotlin bootstrap-4 create-react-kotlin-app

Источник

user1994553 07 апр '20 в 20:34

0 ответов

Другие вопросы по тегам reactjs node.js kotlin bootstrap-4 create-react-kotlin-app

user2642878 24 ноя '20 в 07:06 2020-11-24 07:06 · Answer 1 · 2020-11-24 07:06

Загрузите скрипт начальной загрузки в свой html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
  <title>Sample</title>
</head>
<body>
  <div id="root"></div>
  <script src="sample.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"></script>
</body>

и используйте классы в своем стиле css

override fun RBuilder.render() {
    styledDiv {
        css {
            classes = mutableListOf("alert alert-warning text-center")
        }
        +"Sample"
    }
}