我目前正在开发 Astro (astro.build)，并希望将其与最新的 Bootstrap 版本一起使用。
有谁了解Astro并且可以向我解释一下如何正确集成Bootstrap吗？
在互联网或论坛上没有找到任何内容，至少没有明确的答案。
非常感谢！
对于 npm/yarn：
index.astro---
import "bootstrap/dist/css/bootstrap.min.css";
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js?url";
---
<html>
<script src={bootstrap}></script>
<!-- Your page here -->
</html>
这里有几个选项：
在你的index.astro文件中，你可以分别在标题和正文部分添加Bootstrap最新的CSS和JS，就像这样
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
你可以像这样通过 NPM 安装 Bootstrap
npm install bootstrap@latest
并在 frontmatter 范围内的
index.astro您可以查看此入门模板以获取更多使用想法 https://github.com/twbs/bootstrap-npm-starter
我不断收到 Typescript 错误
<script> uses an expression for the src attribute and will be ignored.import切换到 Astro 的 建议的 CSS 和 JS 实现。
# install via npm
npm install bootstrap@latest
然后在您的
import.astro---
// Astro will bundle and optimize this automatically
import "bootstrap/dist/css/bootstrap.min.css";
---
<html>
<!-- Your page here -->
</html>
<script>
// Astro will bundle and process this automatically
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
</script>