Question

我正在尝试找出最佳实践，我使用该行将引导程序加载到了我的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中-我曾尝试过，但是我合并的引导文件来自我的源存储库，而app.css正在生成到公共目录中。

我对此显然有点陌生，我只是在尝试最好的方法，与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在引导CSS之后，因此优先于引导CSS？

Answer 1

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

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

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

例如，您在resources/sass/_custom_bootstrap.scss内创建此文件

现在您将其导入到app.scss中，如下所示：

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


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

由于app.scss已经在混合文件中并可以编译，因此您不必在混合文件中添加文件。

VueJ的最佳实践，将laravel混合和放置app.js与sass的bootstrap和app.css一起使用

1 个答案: