时间戳

首页 > 解决方案 > 为什么 bulma 会覆盖我的 vue3 组件 css？

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

问题描述

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

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 都可以被覆盖。理想情况下，我希望我的组件的 css 优先，我通常会通过在style标签列表中将 bulma 的 css 放在更高的位置来做到这一点。

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

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

标签： cssvue.jsvuejs3bulmavue-cli-3

解决方案

我能够通过将 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'

推荐阅读