VueJs使用laravel mix和placement app.js以及sass中的bootstrap和app.css的最佳实践

我正在尝试找出最佳实践，我已经使用以下命令将引导加载到我的app.js中

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

问题是，我的app.js位于页面底部，我放置的app.css（由sass生成）位于页眉中，因此bootstrap正在接管我编写的所有样式

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

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

---

要做到这一点，正确的方法是什么，使我的css位于引导css之后，因此优先于引导css？

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

//引导
@导入“~bootstrap/scss/bootstrap”

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

例如，您在
resources/sass/\u custom\u bootstrap.scss

现在，将其导入app.scs，如下所示：

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


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

由于app.scss已经在mix文件中并已编译，您不必在mix中添加该文件。
只需添加
@import'~bootstrap/scss/bootstrap'
到
resources/sass/app.scss
的顶部。不需要以这种方式在JavaScript端导入CSS。我发誓我曾经尝试过这样做，但我一定是走错了引导路径。感谢您快速、完美的回复。
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'],   
  })

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


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