為什么 bulma 會覆蓋我的 vue3 組件 css？

Question

我正在將 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>

這意味着我所有的 css 都可以被 bulma 覆蓋，如果它們的類更具體的話。 理想情況下，我希望我的組件的 css 優先，我通常會通過在style標簽列表中將 bulma 的 css 放在更高的位置來做到這一點。

由於style標簽是由 webpack 的構建過程注入的，我不知道如何影響這一點。

這是默認行為嗎？如果是這樣，我怎樣才能覆蓋bulma的css而不使我的規則更具體（例如使用id）或不必用Z1F8DC276F8040001419C64E9顯式覆蓋bulma css。

Answer 1

我能夠通過將main.js import 移動到 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'