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

Question

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隔离？

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

在css-loader下有一个modules
在webpack中进行配置
阮老师的教程
http://www.ruanyifeng.com/blo...

Answer 5

其实除了内联样式，没办法绝对的隔离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-等这样的前缀