如何更改 NuxtJS 中样式的加载顺序？

Question

我想覆盖项目中样式的加载顺序。

我创建了我的样式表 style.css，其中覆盖了默认值，

body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    position: relative;
    visibility: visible;
    color: #3d3d3d;
    background-color: #FFFFFF;
}

同时项目中我有bootstrapVue通过插件连接使用,

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

由于我只使用了覆盖样式的一个子集，我想使用 bootstrap.

中的其余样式

然而，当我运行项目时，我看到 bootstrap 风格排在第一位，而不是我的，

_reboot.scss :

body { 
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

style.css - disabled (I dont know how to show that the text is crossed out, without loading a picture)
body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    position: relative;
    visibility: visible;
    color: #3d3d3d;
    background-color: #FFFFFF;
}

如果不在 /pages/layout.vue 中的 <style> 部分指定样式，如何更改？

Answer 1

Bootstrap Vue 有自己的 Nuxt 模块，所以你不需要创建自己的自定义插件。使用该模块，您可以disable Bootstrap Vue's automatic importing of styles and then @import those styles directly into your style.css before you declare your own stuff, so that your changes override Bootstrap Vue's. Or, you could import the SCSS versions instead and make your changes using SCSS variables。如果您想坚持使用自己的自定义插件，只需将 CSS 从您的插件中导入并将它们放入您的 style.css 中，如下所示，并忽略 nuxt.config.js 内容。

/* style.css */

@import '../node_modules/bootstrap/dist/bootstrap.css';
@import '../node_modules/vue-bootstrap/dist/bootstrap-vue.css';

body {
  ...
}

// nuxt.config.js

export default {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  }
}

如何更改 NuxtJS 中样式的加载顺序？

How to change the loading order of styles in NuxtJS?

javascript

css

vue.js

bootstrap-vue