当我们在很多页面需要用到相同样式的时候,可以通过封装全局的样式去简化代码 。
可以通过全局引入或者按需引入(全局引入可以直接在main.js里面引入即可,按需引入可以直接在需要用到样式的页面内引入即可)
1.可以在src下面的assets下面的style文件夹下,新建一个 .css / .scss /.less文件(可以根据自己具具体的情况去新建),我在这里是新建的.scss的文件 。

我这里是有一个index.scss文件,在这个文件里面引入的全局的样式,再在main内引入大的index即可。

2.我这里是按钮的样式,给需要用到的页面的按钮上添加对应的类名即可 。

3.因为我的项目内是用了element-ui,所以自己加的类名的层级是不够的,不能覆盖原始的样式,在这里我加了 !important 来提升层级,但是一般是不推荐使用,因为如果后期其他的同事也取了相同的类名的话,就很难改这个样式了,因为这个项目样式我一个人负责,所以我用了这种方法 。

 

 

 

Logo

前往低代码交流专区

更多推荐