laravel 6.* 引入bootstrap报错问题解决方案

Posted 2020-12-01 h-s-l

以下命令均在git管理员方式运行下执行

Laravel 项目中使用 Bootstrap 前端框架，需要先执行以下命令：
$ composer require laravel/ui --dev

上面的命令安装完成后，使用以下命令来引入 Bootstrap ：
$ php artisan ui bootstrap

更改引导文件package.json 建议直接导入以下内容，防止后续报错：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
}

Yarn 对扩展包进行安装
$ yarn install --no-bin-links
$ yarn add cross-env //此处会出现一个报错问题不用管，在Linux环境中没有用，有的写不需要此步骤。

修改resources/sass/app.scss为
// Bootstrap
@import ‘~bootstrap/scss/bootstrap‘;

$ npm run dev 将 .scss 文件编译为 .css
$ npm run watch-poll 在每次检测到 .scss 文件发生更改时，自动将其编译为 .css 文件