VueJs 的最佳实践使用 laravel 混合和放置 app.js 与 bootstrap 和 app.css 来自 sass

Question

我正在尝试找出最佳做法，我已使用

行将 bootstrap 加载到我的 app.js 中

import 'bootstrap/dist/css/bootstrap.css';

问题是我的 app.js 位于页面底部，而我从 sass 生成的 app.css 在页眉中，所以 bootstrap正在接管我写的所有样式以覆盖 bootstrap.

在我的 laravel 布局模板的头部：

<link href="{{ asset('css/app.css?v=1.5') }}" rel="stylesheet">

在页脚中：

<script src="{{ asset('js/app.js?v=1.5') }}"></script>

最佳做法是什么？我是否应该使用 sass 以某种方式混入 bootstrap css - 我试图找到一个没有运气的解决方案。或者也许我也将我的自定义 css 拉入我的 js - 我试过了，但是我合并的 bootstrap 文件来自我的源存储库并且 app.css 正在生成到 public 目录.

我显然对此有点陌生，我只是想找出最好的方法，使用 Laravel、mix 和 VueJs。

这是我的混音文件：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/app.scss', 'public/css');

mix.autoload({
  jquery: ['$', 'window.jQuery', 'jQuery'],
  'popper.js/dist/umd/popper.js': ['Popper']
})

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],   
    'moment': ['moment','window.moment'],   
  })

这样做的正确方法是什么，以便我的 css 在 bootstrap css 之后，因此优先于 bootstrap？

Answer 1

您只需在 app.scss 文件中执行以下操作：

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

这将加载您可以立即使用的 bootstrap 样式依赖项，如果您想覆盖某些样式，您可以创建一个新文件并将其导入主 bootstrap 下的 scss 文件文件。

例如，您在 resources/sass/_custom_bootstrap.scss

中创建此文件

现在您可以像这样在 app.scss 中导入它：

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


// custom
@import 'custom_bootstrap';
...

您不必将文件添加到混音中，因为 app.scss 已经在混音文件中并可以编译。

VueJs 的最佳实践使用 laravel 混合和放置 app.js 与 bootstrap 和 app.css 来自 sass

Best Practice for VueJs using laravel mix and placement app.js with bootstrap and app.css from sass

sass

laravel

bootstrap-4

vuejs2

laravel-mix