Vue为何打包后的样式不一致?-灵析社区

莫克先森

有两个组件``和``,代码如下: export default { name: 'Layout', } .header { background: linear-gradient(135deg, #7f7fd5, #86a8e7, #91eae4); height: 100px; display: flex; align-items: center; } Installed CLI Plugins import Layout from './Layout.vue' export default { name: 'HelloWorld', components: { Layout }, } .header { background: rgb(38, 57, 224); height: 200px; } 此时打包后样式应用如下: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/b43f3f926d5669b22b4258c87f06579d.png) 第一个`header`使用第一组样式,第二个`header`在继承的基础上覆盖了部分样式 但将`layout`最外一层`div`标签去掉后: 变成 再次打包,得到的结果是 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/a82c9225388c2eba9cbfe01fad94ba48.png) 两个`header`应用相同的样式 请问为什么多了一层`div`标签会造成打包结果不同?

阅读量:28

点赞量:0

问AI
和 CSS 作用域有关系,可以看到你 "slot" 进来的 ".header" 元素,同时拥有了当前层级和"layout" 的 "scope" 属性。自然可以应用到两个组件各自的CSS样式。 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/51279a92496a303e8d79bc33ec810a75.png) 如果需要避免这个问题,BEM的命名方式还是需要的。其实很多开发者在最后并不会默认开启组件样式的 "scope" 属性。