本文主要参考了以下大佬的成果:

https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral

https://www.mmxiaowu.com/article/5a105d5e1b60f4043271122e

https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

https://www.cnblogs.com/karthuslorin/p/9038854.html

参考了以上大佬总结的之后,我自己再总结一下我看过之后的收获。

1. 在vue中写样式的时候如果不给样式加scoped的话,就会出现在一个vue文件中修改了样式之后,在另一个vue文件中也会引用那个样式的问题。反之如果加上了scoped,那么在这个vue文件中修改的样式就只能在这个vue文件中生效。通过百度了解了一下。

    在vue项目中style的scoped属性起到了组件内样式私有化的作用,实现原理就是在DOM和CSS后追加一个由数字组成的唯一标识

2. 解决了这个问题之后又遇到了新的问题,在已经写了scoped的style中再想去覆盖element-ui中的样式的时候则会失败,通过百度之后得知设计scoped的初衷就是为了让样式不能且不被修改。

3. 但是如果在同一个vue文件中既要覆盖element-ui中的样式,又要写自己的样式怎么办呢?

    3.1 在一个vue文件中可以写多个style标签,将需要私有化的样式写在带有scoped属性的style标签内。将允许共享的样式写到另外一个没有scoped属性的style标签内。

    3.2 利用>>>来做到scoped的穿透,但是这种方法和scoped的初衷是相反的,不建议这样写,写法如下:

     外部选择器 >>> 第三方组件选择器{ 具体样式 }

/***分割线***/

看了https://www.mmxiaowu.com/article/5a105d5e1b60f4043271122e之后得到的经验:

1. 在vue文件中最好以import的方式引入样式,如果写在vue文件中的话样式会经过vue-loader、less-leader、css-leader,这样会增加构建时间,减慢构建速度。

2. 在使用了scoped之后代码中就会多出一些随机且唯一的标识符,这样无形中增加了打包之后的文件体积。

3. soped只对文件中用到的样式起作用,一般第三方插件的样式名都是经过封装的,所以大多数不会起作用。

4. css中,属性选择器的效率是最低的,尤其是直接用元素选择器的情况下

个人比较喜欢上面链接中的作者的写法,新开一个文件夹,里边专门存放样式,然后将所有样式引入到一个js文件中,最终在app.vue文件中引入。

Logo

前往低代码交流专区

更多推荐