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

【问题标题】：How to change the loading order of styles in NuxtJS?如何更改 NuxtJS 中样式的加载顺序？
【发布时间】：2021-05-31 14:56:18
【问题描述】：

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

我创建了我的样式表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";

由于我只使用被覆盖样式的子集，我想使用引导程序中的其余样式。

但是，当我运行该项目时，我发现引导风格是第一位的，而不是我的，

_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> 部分中指定样式，如何更改它？

【问题讨论】：

你在哪里导入 style.css？
在 nyxt.config.js 中：css：["@/assets/css/style.css"]，插件：["@/plugins/bootstrapVue"]，

标签： javascript css vue.js bootstrap-vue

【解决方案1】：

Bootstrap Vue 有自己的 Nuxt 模块，因此您无需创建自己的自定义插件。使用该模块，您可以在声明自己的东西之前将disable Bootstrap Vue's automatic importing of styles 和@import 这些样式直接放入您的style.css，以便您的更改覆盖Bootstrap Vue。或者，您可以导入 SCSS 版本并进行更改 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
  }
}

【讨论】：