为什么 bulma 覆盖了我的 vue3 组件 css？

Question

我在 vue cli 3 项目中使用 bulma，我在 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>

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

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

这是默认行为吗？如果是，我如何覆盖 bulma 的 css 而不使我的规则更具体（例如使用 id）或者不必显式覆盖 bulma css sass.

Answer 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'

为什么 bulma 覆盖了我的 vue3 组件 css？

Why is bulma overriding my vue3 component css?

css

vue.js

bulma

vue-cli-3

vuejs3