vue项⽬的样式加载顺序
加载顺序以main.js中 important 引⼊顺序为主，后引⼊样式会覆盖先引⼊样式
本地运⾏时，App以及router相关样式的权值会被提到最⾼
import App from './App'
// 控制App.vue⽂件中style的加载
import router from './router'
// 控制view和 components 中相关style的加载
本地运⾏时css加载顺序：
1. 按序加载 main.js 中important 引⼊的样式以及组件（除却App以及router）
2. 加载App.vue中 style以及相关组件style
3. 加载当前页⾯ style 以及页⾯相关组件style
build（发布到线上）后：
router内部加载顺序：
1. notfound ⽂件style加载
2. 公⽤组件style加载
3. 页⾯style以及页⾯组件style加载
css的顺序是“元素上的style” > “⽂件头上的style元素” >“外部样式⽂件”
1. 样式表的元素选择器选择越精确，则其中的样式优先级越⾼：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
所以上例中，#navigator的样式优先级⼤于.current_block的优先级，即使.current_block是最新添加的，也不起作⽤。
2. 对于相同类型选择器制定的样式，在样式表⽂件中，越靠后的优先级越⾼
注意，这⾥是样式表⽂件中越靠后的优先级越⾼，⽽不是在元素class出现的顺序。⽐如.class2 在样式表中出现在.class1之后规范：
main.js ⽂件引⼊顺序
1、静态css⽂件
2、UI组件库
3、App
4、router
*全局样式尽量在App.vue中引⼊，在具体业务中引⼊global，引⼊多少次，app.css中就会打包多少次
CSS中link和import的加载顺序：
1、import与link的区别：
@import url(“CSS地址”) CSS专⽤语法
作⽤：@import作⽤于团队分⼯，最后合并⼀起
可以在.css中使⽤，即在⼀个css⽂件中能够引⼊另外的CSS⽂件，
或者是在标签使⽤，如下：
link：链接 relation：关联(可以省略)
type：类型 href： HyperText Reference超⽂本引⽤
作⽤：主要⽤来引⼊CSS和⽹页图标，指⽰告知搜索引擎，⽹页之间的关系
2、link与import加载顺序级别：link⽐import优先加载
加载顺序对于⽹站前台重构（优化⽹页结构，性能）有影响
第⼀：HTML，同时加载link,CSS和加载import的样式
HTML加载：
1 加载HTML-DOM结构
2 CSS,JS
3 图⽚，多媒体
4 加载完成后onload事件触发
第⼆：加载顺序对⽹站的影响：
import：import放到底部，数据先出来，然后美化
link：CSS优先，边加载，边渲染
link⽆论放到哪⾥都是优先加载，import受代码顺序影响
⽤⾃⼰的CSS建议使⽤link，放前⾯
⽤第三⽅：import,js放到底部，不影响⾃⼰⽹站css最新

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。