在 Laravel 5.5 中使用 Bootstrap 4 主题答案

【问题标题】：Use Bootstrap 4 theme with Laravel 5.5在 Laravel 5.5 中使用 Bootstrap 4 主题
【发布时间】：2018-07-29 16:23:21
【问题描述】：

最近才加入 Laravel 和 Bootstrap 4 的潮流，唉，我已经让 Laravel 5.5 与 Bootstrap 4.0 一起运行没问题。太好了，我有 getbootstrap.com 仪表板主题，但我不清楚如何编译主题资产和依赖项，即我该如何处理 gulpfile.js 和 package.json？

注意：我使用的是 Laravel 5.5.34 和 Bootstrap 4.0.0。我宁愿学习如何使用 Laravel Mix 编译资产并从 Gulp 迁移到 Webpack，而不是简单地将 dist CSS 复制到公共目录或链接到刀片模板中的 CDN。

【问题讨论】：

也许可以尝试一些前端框架，比如VueJS，它与开箱即用的 Laravel 有很好的联系？
我不确定 Vue（或 React）如何提供帮助。我认为我需要查看的是将 TWBS gulpfile 迁移到 webpack 或其他东西，并将主题依赖项添加到 package.json 中......如果我不得不猜测的话
教程在这里5balloons.info/…
@Tushar 这是一个关于如何制作刀片模板并包含 TWBS CDN 的教程，即 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> `

标签： laravel bootstrap-4 laravel-5.5 laravel-mix

【解决方案1】：

我也遇到了同样的困境，Jeffrey Way 的 this answer 帮助了我。

我在 resources/assets 文件夹中创建了一个 css 文件夹（现在它看起来像 resources/assets/css ）。我把主题自带的所有css文件都复制到了这个文件夹里。

我更新了应用程序根目录中的 webpack.mix.js 文件

mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
      'resources/assets/css/app.min.css',
      'resources/assets/css/primary.css',
      'resources/assets/css/style.css'
  ], 'public/css/app.css');

现在当我运行 npm run dev 时，所有的 css 都被编译成一个单独的文件在 pubilc/css/app.css 和 js 在 public/js/app.js 中

注意：我的主题还附带了一个名为 app.min.js 的 js 文件

所以我将它包含在 public/js/app.min.js 中，因为主要编译文件名为 app.js。如果您的主题有一个文件 app.js 将其重命名为 theme.js 并放在 public/js 文件夹中。

您可以在使用 {{asset('css/app.css') }}

编译它们后以正常方式调用它们

【讨论】：