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

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注