0

我在 Laravel 中降级 Bootstrap 版本时遇到问题。Laravel 带有 Bootstrap 4，但我想使用 Bootstrap 3。所以我更改了 package.json 中的版本并运行 npm install。但是如果我从 package.json 运行 npm run dev 它会因为缺少文件 bootstrap/scss/bootstrap 而引发错误。B3还带有Less而不是scss。所以我有点困惑应该配置什么以及如何使用 Bootstrap 3 和更少。希望这就是全部，它会在修复后工作。

这是 resources/sass/app.scss 中的问题文件

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

这是 package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env 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": "cross-env 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": "cross-env 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": "^3.4.1",
        "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": "^2.5.17",
        "vue-template-compiler": "^2.6.11"
    }
}
4

1 回答 1

0

你可以做到老派风格。在您的 html 模板中对其进行硬编码：

1.插入

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.0.min.js" integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="{{ asset('js/app.js') }}"></script>

2.在resources/js/app.js文件中，删除require('./bootstrap')

3.不要在app.scss文件中导入引导程序。

您仍然可以在app.js和app.scss中编译所需的任何内容

于 2020-10-02T11:47:02.050 回答