我是react & vite的新手。所以正在开发一个需要引导的vite react应用程序。我在官方引导网站上关注了this。但是所有的引导功能似乎都不起作用。比如按钮可以正常工作，但表单却不行。下面是我的项目结构：
my-project/
|── node_modules
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ | └── styles.scss
| └── index.html
├── package-lock.json
├── package.json
└── vite.config.js这是我的main.js：
// Import our custom CSS
import "../scss/styles.scss";
// Import all of Bootstrap's JS
import * as bootstrap from "bootstrap";这是styles.scss：
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";这是index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
</head>
<body>
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
<script type="module" src="./js/main.js"></script>
</body>
</html>最后是vite.config.js：
const path = require("path");
export default {
root: path.resolve(__dirname, "src"),
resolve: {
alias: {
"~bootstrap": path.resolve(__dirname, "./node_modules/bootstrap"),
},
},
server: {
port: 8080,
hot: true,
},
};这是package.json：
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.61.0",
"vite": "^4.2.1"
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"bootstrap": "^5.2.3"
}
}在index.html中，输出应该是这样的：
但在我的项目中，它看起来像这样：
编辑我将我的引导版本降级到4.1.3。但是表单似乎不起作用。下面是我的结果：
以下是预期结果：
这里是最新的package.json：
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"bootstrap": "^4.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"sass": "^1.61.0",
"vite": "^4.2.0"
}
}
1条答案
按热度按时间dvtswwa31#
你期待的按钮来自Bootstrap v4。但你已经安装了Bootstrap v5，它似乎可以工作。
您应该遵循Bootstrap v5文档;https://getbootstrap.com/docs/5.3/components/badge/#examples
或者您可以更改您的Bootstrap版本。