英文:
Custom stylesheet in index.html not overriding Bootstrap 5 installed with NPM
问题
In your Vue 2 项目中，我使用 NPM 安装了 Bootstrap 5.3，但在 index.html 代码中的自定义 CSS 样式表未能覆盖 Bootstrap 的 CSS。
当通过 CDN 获取 Bootstrap 时，我没有任何问题。此外，直接在组件中添加的自定义 CSS 正确地覆盖了 Bootstrap 的 CSS。只有在 index.html 中的全局样式表被覆盖了。
我的 main.js 如下所示：
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'
import store from './store'
import VueI18n from 'vue-i18n'
Vue.use(Vuex)
Vue.use(VueI18n)
Vue.use(Bootstrap)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
new Vue({
store: store,
router,
i18n,
beforeCreate() { this.$store.commit('initialiseStore');},
render: h => h(App),
}).$mount('#app')
而我的 index.html 如下所示：
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>media/css/layout.css?v2">
<link rel="stylesheet" href="<%= BASE_URL %>media/css/mobile.css?v1">
我通过从 index.html 中删除样式表引用并在 App.vue 中插入以下代码来使其工作：
<style lang="scss">
@import '/media/css/layout.css';
@import '/media/css/mobile.css';
</style>
但我不知道在 App.vue 中调用自定义样式表是否是正确的方法。如果通过 NPM 安装了 Bootstrap，是否仍应在 index.html 中引用它？如果是的话，如果其文件夹在 node_modules 中，我该如何做？
英文:
In my Vue 2 project I installed Bootstrap 5.3 using NPM, but my custom CSS stylesheet in the index.html code is not overriding Bootstrap's CSS.
I had no problems when getting Bootstrap via CDN. Also, my custom CSS added directly in the components are correctly overriding Bootstrap's CSS. It's just my global stylesheet in index.html that is being overridden.
My main.js looks like this:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'
import store from './store'
import VueI18n from 'vue-i18n'
Vue.use(Vuex)
Vue.use(VueI18n)
Vue.use(Bootstrap)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
new Vue({
store: store,
router,
i18n,
beforeCreate() { this.$store.commit('initialiseStore');},
render: h => h(App),
}).$mount('#app')
And my index.html looks like this:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>media/css/layout.css?v2">
<link rel="stylesheet" href="<%= BASE_URL %>media/css/mobile.css?v1">
I was able to make it work by removing my stylesheet reference from index.html and inserting the code below in the App.vue:
<style lang="scss">
@import '/media/css/layout.css';
@import '/media/css/mobile.css';
</style>
But I don't know if calling my custom stylesheet in App.vue is the correct way to do this. And should I still have to reference Bootstrap in index.html if it is installed by NPM? If yes, how can I do this if its folder is in node_modules?
答案1
得分: 1
你可以通过 npm 或者 CDN 使用 Bootstrap，但不需要两者都用。在任一情况下，最好在应用程序中选择一种方法，并遵循一贯性。有关使用 Bootstrap 的不同方法的更多信息，请参阅官方文档。
在导入或包含 Bootstrap CDN 时，应注意CSS 的优先级和特异性规则。按照以下方式，将最重要的样式表放在最后：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- 最重要的规则最后导入 -->
<link rel="stylesheet" href="/mycustom.css">
或者使用导入的方式：
import 'bootstrap/dist/css/bootstrap.css';
/* 最重要的规则最后导入 */
import 'mycustomstyles.css';
如果你使用混合方式，例如一些样式是导入的，而另一些样式是包含在 HTML 中的，那么它取决于导入在 HTML 页面中的添加方式。例如，在 React 中，样式导入通常添加在<head>元素的末尾。因此，它们通常比在 HTML 页面中定义的任何 CSS 样式表链接具有更高的优先级，因为它们会在其下方插入。特异性也很重要，inline 样式和带有 !important 的样式具有较高的优先级。
所以，如果一个 Bootstrap 规则被标记为 !important，它将覆盖您的规则，即使样式表在它之后导入或包含，除非您也为相同的目标元素使用 !important 或者使用内联样式。
有关特异性的更多信息，请参阅此答案。
英文:
You either use bootstrap through npm or use CDN, you don't have to do both. In either case, it's best to stick to one method throughout your app, for more info about the different ways to use bootstrap, take a look at the official documentation.
In either case, when importing or including bootstrap CDN, you should take care of CSS precedence and specificity rules. Import or include your most important stylesheets last, as follows:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- your most important rules imported last -->
<link rel="stylesheet" href="/mycustom.css">
Or using imports as follows:
import 'bootstrap/dist/css/bootstrap.css';
/* your most important rules imported last */
import 'mycustomstyles.css';
If you use a hybrid approach .e.g. some styles are imports and others you include in the html, it depends on how the imports are added in the html page. For example, in react, styles imports are added at the end of the <head> element. So generally, they have higher priority than any css stylesheets links defined in the html page itself as they would be insered below it. Specifity is also important, inline styles and !important styles have high priority.
So, if a boostrap rule is listed !important, it will override your rule even if the stylesheet imported or included after it unless you use !important, too for same target element or use inline styles.
For more info about specifity, look at this answer
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论