下面是一段通过vue-cli生成的app.vue的组件,并用css modules 进行了修改
<template>
<div :id="$styleB.app">
<div :id="$styleB.nav" :class="$styleB.bg">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
created() {
console.log(this.$styleB)
//{bg: "App_bg_2d5i2", app: "App_app_7GWKZ", nav: "App_nav_32ReM", router-link-exact-active: "App_router-link-exact-active_25SP7"}
}
}
</script>
<style module="$styleA">
</style>
<style module="$styleB" lang="scss" >
.bg {
font-size: 14px;
// background: rgb(83, 13, 13)
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
这里的问题是 router-link-exact-active 类名是由js动态生成的,但是因为启用了 css modules 这里的类名被替换为 App_router-link-exact-active_25SP7 也就是针对这个状态的样式失效了
我试着把 router-link-exact-active 设置为global
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
:global(&.router-link-exact-active) {
color: #42b983;
}
}
}
这样 router-link-exact-active 类名虽然没有转化但是只能解析出
#App_nav_32ReM a {
font-weight: bold;
color: #2c3e50;
}
并不能解析出 #App_nav_32ReM a.router-link-exact-active来
如果下面这样
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.:global(router-link-exact-active) {
color: #42b983;
}
}
}
编译会出错
然后我尝试把 router-link-exact-active 提取出来
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
}
}
:global {
.router-link-exact-active {
color: #42b983;
}
}
这样却会产生一个问题 就是 #App_nav_32ReM a 的权重比 .router-link-exact-active 大
所以我又尝试下面的写法
:global {
#nav a.router-link-exact-active {
color: #42b983;
}
}
不知道是不是因为 #nav 冲突问题这里的样式没有被解析出来
请问一下有什么办法在尽量少修改结构的情况下,让css过渡到使用 css modules, 又能解决这些由js动态插入的类名问题