为什么某个组件引入bootstrap会影响其他页面的样式？

Z时代
2024-03-07
分类：IT

比如我这个项目有AB两个页面，B中引入了bootstrap相关文件，当我直接访问A时，样式是正常的，但是当我访问B再切换到A时A页面样式就受到了影响。
我打开控制台发现A页面中多了一个_reboot.scss的样式表，就是它影响了A页面样式。
那么为什么在B页面引入的样式会影响A页面呢？怎么操作才能避免这种影响？

我大概知道什么原因了，即时在加了scoped 的 style中进行import引入，所引入的样式依然会污染全局，需要这样引入才行。
<style src="xxx.css" scoped></style>
但是这又出现了新问题，我的bootstrap文件是在node_modules下的，这里好像不能用‘~’之类的特殊符号，我试了试相对路径也不行，这该怎么引入呢？

我再简化下问题

如果我按照以下方式写，bootstrap是可以正常引入的，但是会污染全局
<style scoped>
@import '~bootstrap/dist/css/bootstrap.css';
@import '~bootstrap-icons/font/bootstrap-icons.css';
</style>
像下面这样写不会污染全局，但是这样写会报错，这里的src该怎么写呢？
<style src="~bootstrap/dist/css/bootstrap.css" scoped></style>
<style src="~bootstrap/dist/css/bootstrap-icons.css" scoped></style>

错误信息如下：
Failed to compile.

./src/views/teaching/classes/index.vue
Module not found: Error: Can't resolve '~bootstrap-icons/font/bootstrap-icons.css?vue&type=style&index=1&id=c2ec5cfe&scoped=true&lang=css&' in 'D:\phpstudy_pro\WWW\project_a\src\views\teaching\classes'

回答：

使用第二种css引入方式，如果scoped对bootstrap的css生效了，样式应该也是无效的。scoped会给当前组件所有元素加个data-v-xxxx的属性值，这个属性值每个组件都是唯一的，scoped内的css会在末尾使用属性选择器，类似.a .b .c[data-v-xxxx] {}，这样就让样式只对当前组件有效。但是data-v-xxxx的属性对于第三方组件只会加在最外层的元素上，内部元素是没有data-v-xxxx属性的，所以内部元素的css依然使用属性选择器是匹配不到元素的。
单个页面单独使用bootstrap成本很高，一般是全局引入，如果只是对一两个页面有影响，建议直接将bootstrap全局引入，修改受影响的页面。
单个页面使用bootstrap而不考虑全局引入的话，如果是使用其中的某个组件，建议将组件源码copy出来放到项目中，方便后期开发维护