一、vue样式style层次分析
1、样式可以在main.js、模块js文件、组件style、组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系。
2、总结:
(1)样式从main.js的入口处开始顺序加载(注意顺序的意思),
(2)遇到组件则加载组件script标签内引入的样式,
(3)先处理完所有script中引入的样式,
(4)再处理style,style按包含关系从外到内加载(注意这个从外到内的意思)
3、这些页面都是固定的,如果是异步加载页面,当路由切换到另一个页面时,此页面原来的样式是否会删除,当前页面的样式会添加到哪里?
先只会加载到app.vue的style,再点击那个页面就先加载页面的js文件,然后再执行script加载script里引入的css,再加载style里的css
4、如果都是异步加载组件,会怎么样?
如果ComA和ComB都是异步组件,则先打开哪一页就加载哪一页的script和style
总结:
(5)异步组件先显示的先加载,
(6)没有显示的页面或组件不加载style
5、一个组件内可以定义不止一个style,并且有scoped的style和没有scoped的style可以并存,它们会按照所定义的顺序加载(注意顺序加载的意思),并跟普通CSS拥有一样的权重优先机制。
6、通过main.js进入的样式是在head中显示,所以如果我们再body中定义样式是可以把head标签内的同名样式覆盖掉的,但是要注意的是在body内引入的样式,因为已经不在main.js控制范围内,也就是不参与打包,所以必须定义在static静态资源目录内。