vue3 引入css文件问题?

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

回到顶部