vue3 引入css文件问题?
如图,如果使用使用的是 router-link
那只要访问过的CSS样式文件会全部加载,怎么然他只加载当前模板的 CSS
文件
/src/App.vue
<template> <div>
<router-link to="/" style="margin-left: 30px; color: #0a0c0d;">Home</router-link>
<router-link to="/about" style="margin-left: 30px; color: #88334b;">About</router-link>
<router-link to="/news/list/1" style="margin-left: 30px; color: #c7be04;">新闻列表</router-link>
<router-link to="/news/item/1" style="margin-left: 30px; color: #17720b;">新闻详情</router-link>
</div>
<RouterView />
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
/src/views/HomeView.vue
<template> <h1>HomeView</h1>
</template>
<script>
export default {
name: "HomeView"
}
</script>
<style scoped>
@import url('@/assets/css/home.css');
</style>
/src/views/news/list/IndexView.vue
<template> <h1>news:list:IndexView</h1>
</template>
<script>
export default {
name: "IndexView"
}
</script>
<style scoped>
@import url('@/assets/css/news/list/index.css');
</style>
如果加了 scoped
那当前文件里面的子组件不起作用,如果不加,所有文件都会被 CSS
文件覆盖,明明 /src/views/news/list/IndexView.vue
和 /src/views/HomeView.vue
没有任何关联呀?
回答:
CSS样式隔离的问题,看起来是因为你的CSS类名命名不规范的表现。
如果你不想使用 scope
那么就需要按一定规则去设计CSS类名。比如说 BEM命名规范。
如果你不想为了起CSS类名烦恼,想使用 scope
来隔离样式,然后又想要控制子组件的样式,那么需要使用样式穿透,比如说 CSS 所原生支持的 >>>
,或者 Vue3
推荐使用的 :deep()
来包裹。
相关阅读
#深度作用选择器 - 单文件组件 CSS 功能 | Vue.js
用更合理的方式写 CSS
MindBEMding – getting your head ’round BEM syntax
梳理 CSS 模块化
CSS 模块化 & 样式隔离
Vue 中的样式穿透 v-deep、/deep/ 和 >>>
以上是 vue3 引入css文件问题? 的全部内容, 来源链接: utcz.com/p/933464.html