为什么 bulma 会覆盖我的 vue3 组件 css？答案

【问题标题】：Why is bulma overriding my vue3 component css?为什么 bulma 会覆盖我的 vue3 组件 css？
【发布时间】：2021-07-18 07:08:36
【问题描述】：

我正在将 bulma 与 vue cli 3 项目一起使用，并且我在 index.js 下包含了 bulma 导入，如下所示

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma';

然后，我在各个组件的 style 标记中指定了 css。当我加载页面时，我可以看到bulma的css是style标签列表中的最后一个，如下

<style type="text/css">
.componentSpecificClass{
    color:white;
}
</style>

<style type="text/css">/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
.button, .input, .textarea, .select select, .file-cta,
...
</style>

这意味着如果 bulma 的类更具体，我的所有 css 都可以被覆盖。理想情况下，我希望我的组件的 css 优先，我通常会通过在 style 标签列表中将 bulma 的 css 放在更高的位置来做到这一点。

由于style标签是由webpack的构建过程注入的，我不知道如何影响这一点。

这是默认行为吗？如果是这样，我如何在不使我的规则更具体（例如，使用 id）或不必用 sass 显式覆盖 bulma css 的情况下覆盖 bulma 的 css。

【问题讨论】：

标签： css vue.js vuejs3 bulma vue-cli-3

【解决方案1】：

我能够通过将 bulma 导入移动到 main.js 的顶部并将其从 require 更改为 import 来解决此问题，如下所示

之前

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma';

现在

import '@/assets/main.scss';
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

【讨论】：