webpack合并 CSS 后，不同组件的样式互相影响？

Question

之前用 vue的单文件组件在写样式时，style 标签加上 scoped属性

<style lang="less" scoped>
    .toast-text{
        font-size: 14px;
    }
</style>

wbpack构建后访问,如下所示。发现多了字符串_v-01685f66来控制css的作用域，一定程度上了对其他组件的影响(如果不小心写了同名class)

.toast-text[_v-01685f66]{
    font-size: 14px;
}

<span class="toast-text" _v-01685f66="">hahah</span>

有工具可以对react的组件可以做这样的处理吗?或者大家是如何避免这种组件之间同名css 的影响？

Answer 1

现在可以直接用inline的方式来写css，规模控制在一个最小粒度的子组件中（根据实际情况和复用性调整）

优点是不会造成命名冲突；缺点是css代码不能被缓存。

添加demo：

const styles = {
    container: {
        //...
    },
    show: {
        display: 'block'
    },
    hide: {
        display: 'none'
    },
    baz: {
        //...
    }
}

<Bar
    style={Object.assign({}, styles.container, (this.props.display ? styles.show : styles.hide))}>
    // 当需要根据状态对样式进行控制时，用assign来merge
    <Baz 
        style={styles.baz}
    />
</Bar>

Answer 2

css-loader 可以参考看看。

Answer 3

试试使用css-modules, 可以很好的解决类名可能会冲突的问题 ， 看这里

Answer 4

http://www.75team.com/post/1049.html cssmodules
还可以看哈postcss

Answer 5

我都是把样式嵌套在组件最高层元素下面，这样就算样式一样因为父元素不一样也不会有问题了