npm 如何在svelte JS应用程序中添加bootstrap模块？

p3rjfoxz 于 2023-10-19 发布在 Bootstrap

关注(0)|答案(5)|浏览(178)

我对svelte非常陌生（像我们中的许多人一样），我没有设法将bootstrap添加到我的应用程序中。尝试运行'npm add bootstrap'，但它说我需要peer jquery dependencie。这里是终端渲染
我不明白的是为什么这个包已经被添加了，而我仍然不能使用引导类。第二点，为什么要讲对等依赖？这其中有什么联系我不知道我是否错过了什么，但如果你们有解决方案，它将帮助很大。谢谢你

npm add bootstrap

npm WARN [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) requires a peer of [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) - 3 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

+ [email protected]
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```

npm

来源：https://stackoverflow.com/questions/59842528/how-to-add-bootstrap-module-in-a-svelte-js-app

5条答案

按热度按时间

6ljaweal1#

您的问题是将bootstrap安装到node_modules中不会自动将这些文件包含在应用程序中。有几种不同的方法可以实现这一点。

选项一：手动将文件复制到`/public`

1.下载引导文件并将它们放在svelte项目的public文件夹中。
1.在public/index.html中添加css链接。<link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>。
这种方法的缺点是需要将引导文件夹提交到版本控制系统，这通常是不受欢迎的。

选项二：使用rollup将文件复制到`/public`

1.安装rollup-plugin-copy
1.更新rollup.config.js以包含copy插件。下面是一个新安装的rollup.js.js文件中重要部分的片段。

//...
import copy from 'rollup-plugin-copy'

export default {
    //...
    plugins: [
        //...
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),
       //...
    ],
    //...
};

1.在public/index.html中添加css链接。<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>

赞(0）回复(0）举报 2023-10-19

moiiocjp2#

这个答案是对公认答案的第二个选项的补充。（我还不能评论）
您也可以选择并保存Bootstrap的所有文件，而不是将其复制到public文件夹中。例如，我只需要精简的CSS和捆绑的精简的JavaScript，所以我这样配置copy插件：

//...
import copy from "rollup-plugin-copy";

export default {
  //...
  plugins: [
    //...
    copy({
      targets: [
        {
          src: "node_modules/bootstrap/dist/css/bootstrap.min.css",
          dest: "public/vendor/bootstrap/css",
        },
        {
          src: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          dest: "public/vendor/bootstrap/js",
        },
      ],
    }),
    //...
  ],
  //...
};

CSS可以包含在public/index.html的<head>标签中：

<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>

JavaScript可以包含在public/index.html中的<body>标记（在末尾）中：

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

赞(0）回复(0）举报 2023-10-19

nfeuvbwi3#

还有sveltestrap作为Svelte Society设计系统之一

赞(0）回复(0）举报 2023-10-19

thtygnil4#

我成功地将Bootstrap 5添加到我的Svelte项目中，以下是如何做到这一点：
1.你需要有苗条的项目，见for Svelte和for SvelteKit
1.进入项目目录。
1.运行npm install或yarn（如果您更喜欢yarn）以下载package.json中列出的依赖项。
1.然后使用npm install bootstrap（或npm i bootstrap）或yarn add bootstrap添加Bootstrap。如果需要，可以指定版本。它的文件夹将出现在node_modules中的其他依赖项中。
1.由于Bootstrap需要popper.js和jQuery，我们还需要添加它们：npm i @popperjs/core jquery。
1.现在我们已经安装了Bootstrap（它的源代码在node_modules文件夹中），我们需要将它链接到我们的应用程序。由于Svelte app基本上是一个html页面，我们可以简单地在src/app.html中添加指向Bootstrap CSS和JS的链接：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    %sveltekit.head%
</head>

<body>
    <div>%sveltekit.body%</div>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

默认情况下，vite.config.js中未预配置node_modules的别名。
就这样，这对我很有效。

赞(0）回复(0）举报 2023-10-19

8ehkhllq5#

这就是我所做的：

import { onMount } from 'svelte';

onMount(async () => {
    await import('bootstrap/dist/css/bootstrap.css')
    window.bootstrap = await import('bootstrap/dist/js/bootstrap.esm.js')
    // Some code that uses bootstrep - e.g.:
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})

赞(0）回复(0）举报 2023-10-19

我来回答

npm 如何在svelte JS应用程序中添加bootstrap模块？

5条答案

选项一：手动将文件复制到`/public`

选项二：使用rollup将文件复制到`/public`

相关问题

热门标签

最新问答

npm 如何在svelte JS应用程序中添加bootstrap模块？

5条答案

选项一：手动将文件复制到/public

选项二：使用rollup将文件复制到/public

相关问题

热门标签

最新问答

选项一：手动将文件复制到`/public`

选项二：使用rollup将文件复制到`/public`