在Laravel 8项目中使用laravel-mix将Bootstrap、jQuery和popper.js添加进来,可以按照以下步骤进行操作:
node -v
npm -v
如果没有安装,请根据官方文档进行安装。
npm install laravel-mix --save-dev
这将在项目中安装laravel-mix并将其添加到package.json
文件的devDependencies
中。
npm install bootstrap jquery popper.js --save
这将安装这些依赖并将它们添加到package.json
文件的dependencies
中。
webpack.mix.js
文件,并添加以下代码:const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
'popper.js/dist/umd/popper.js': ['Popper']
})
.options({
processCssUrls: false,
postCss: [
require('autoprefixer'),
]
});
这个配置文件告诉laravel-mix如何处理JavaScript和Sass文件,并自动加载jQuery和popper.js。
resources/js
目录中创建一个名为app.js
的文件,并添加以下代码:import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
这将导入Bootstrap的JavaScript和CSS文件。
resources/sass
目录中创建一个名为app.scss
的文件,并添加以下代码:@import '~bootstrap/scss/bootstrap';
这将导入Bootstrap的Sass文件。
npm run dev
这将使用laravel-mix编译JavaScript和Sass文件,并将它们复制到public/js
和public/css
目录中。
完成以上步骤后,Bootstrap、jQuery和popper.js就已经成功添加到Laravel 8项目中了。你可以在项目的视图文件中使用它们,例如在resources/views/welcome.blade.php
中添加以下代码:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 with Bootstrap</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome to Laravel 8 with Bootstrap</h1>
<button class="btn btn-primary">Click me</button>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
这样,你就成功地将Bootstrap、jQuery和popper.js添加到Laravel 8项目中了。请注意,以上步骤假设你已经创建了一个全新的Laravel 8项目,并且按照默认的目录结构进行操作。如果你的项目结构有所不同,你可能需要相应地调整路径。
领取专属 10元无门槛券
手把手带您无忧上云