如何工程化的角度如何实现 vue/react组件之间的css隔离?

我叫雷锋
  • 374

A组件

<template>
    <div class='a'></div>
</template>    
<style>
    .a{
        color:red;
    }
</style>

B组件

<template>
    <div class='a'></div>
</template>    
<style>
    .a{
        color:red;
    }
</style>

比如不使用命名空间,不使用vue提供的scope,怎么使用工程化的角度去实现css隔离?

回复
阅读 4.3k
5 个回答
✓ 已被采纳

CSS Modules,用了以后忘不了啊忘不了,从此再也不用担心命名冲突的问题了

C语言没有命名空间,也没有模块化编程标配的import机制,如何进行模块化编程?
无它,注意变量别重名了就行。

@n͛i͛g͛h͛t͛i͛r͛e͛[nightire] 赞同这个同学的答案,使用CSS Modules

其实除了内联样式,没办法绝对的隔离css,如

<style>
    div[data-addr] {
        font-size: 20px;
    }
</style>
<div data-addr>
    <!-- 假如dialog是一个组件 -->
    <dialog></dialog>
</div>

原本dialog组件内的样式不应该被外部div[data-addr]所影响,但按这样的话,这个div内部的所有文字大小都会是20px,这很无奈吧。但如果使用内联样式,却没办法使用@keyframes、或者-webkit-、-ie-等这样的前缀

宣传栏