测试运行dev server命令:
我遵循了以下指南:
https://getbootstrap.com/docs/5.2/getting-started/vite/
，我仍然得到各种各样的错误，有时文件没有找到，有时我只是没有看到引导设计。
我安装Bootstrap使用npm:
npm install bootstrap@5.2.2
然后我用npm安装了scss:
npm i --save-dev sass
然后我在vite.config.js中添加了以下内容:
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
}
}
还添加了以下内容到/resources/app.js:
import '/resources/scss/styles.scss'
import * as bootstrap from 'bootstrap';
我还在/resources中创建了一个新的scss文件夹，并将以下styles.scss文件放在里面:
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
但是当我使用npm run dev或build时，Bootstrap样式不显示，或者我得到关于文件不存在的错误，例如:
[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap
使用Vite在Laravel 9中安装Bootstrap 5
- 安装Bootstrap 5和依赖项要从命令终端安装Bootstrap，请执行以下指令
npm i bootstrap sass @popperjs/core --save-dev
- 配置Vite和依赖项将":resources/css/app.css"重命名为":resources/css/app.scss"打开项目根目录下的vite.config.js文件，将引用的resources/css/app.css改为resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
在resources/css/app。通过添加以下代码行
来导入Bootstrap@import 'bootstrap/scss/bootstrap';
在文件resources/js/bootstrap.js中添加以下行
...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
- 更改.blade为热重新加载
在resources/views/welcome.blade.php文件中，在结束标记之前粘贴以下代码:
...
@vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
npm run dev