vue书写样式的两种方式

Posted 2023-03-23

参考技术A

这种方式可以直接书写第三方库的样式

home.vue

style - home.scss

所有的vue单文件都有自己的样式文件，所有的样式文件都放在style文件夹中，为了防止各个文件之间的样式互相影响，为各个文件的最外层节点定义单独的类名区分。
将所有样式文件引入到一个文件中，最后在main.js文件中引入
style - index.scss

main.js

在每个vue单文件中书写自己的样式，添加scoped属性。这种方式书写第三方库的样式时，需要使用深度作用选择器。

或者将样式提取成一个单独的文件

scoped私有作用域和deep selector深度作用选择器

网站导航

vue中修改element ui组件默认样式的两种方式

参考技术A vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。

可以用以下两种方式修改：

1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改

2.外部引入css文件，默认样式会被覆盖

3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）

也可以在外层加一个div，然后赋值一个class或者id，在scss中用这种语法修改对应的组件上的class名字即可