Vue的单个文件元器件数据-V-XXXXXXXX结合生成的元素

Question

我建立一个Vue的组件作为单个文件组件：

<template> 
    <div class="chart"></div> 
</template> 

<script> 
import * as d3 from 'd3'; 

export default { 
    data() { 
    return { 
     data: [4, 8, 15, 16, 23, 42], 
    }; 
    }, 
    mounted() { 
    d3.select('.chart') 
     .selectAll('div') 
     .data(this.data) 
     .enter() 
     .append('div') 
     .style('width', d => `${10 * d}px`) 
     .text(d => d); 
    }, 
}; 
</script> 

<style lang="scss" scoped> 
.chart { 
    div { 
    background-color: steelblue; 
    color: white; 
    font: 10px sans-serif; 
    margin: 1px; 
    padding: 3px; 
    text-align: right; 
    } 
} 
</style> 

用的WebPack处理之后，CSS呈现像这样：

<style type="text/css"> 
.chart div[data-v-xxxxxxxx] { 
    background-color: steelblue; 
    color: white; 
    font: 10px sans-serif; 
    margin: 1px; 
    padding: 3px; 
    text-align: right; 
} 
</style> 

但是HTML显示为：

<div data-v-xxxxxxxx class="chart"> 
    <div style="width: 40px;">4</div> 
    <div style="width: 80px;">8</div> 
    <div style="width: 150px;">15</div> 
    <div style="width: 160px;">16</div> 
    <div style="width: 230px;">23</div> 
    <div style="width: 420px;">42</div> 
</div> 

我使用D3来生成子<div> s。我发现data-v-xxxxxxxx未绑定到生成的元素。如果我有孩子<div> S IN的原始模板，而不是生成它们，它们每一个都具有data-v-xxxxxxxx属性和样式应用如预期

我认为根节点的任何后裔，无论是包括在模板或产生应该被绑定到范围化CSS的规则。有什么办法可以强制这个吗？

Answer 1

vue-loader的新版本（来自版本12.2.0）允许您使用“深层范围”的CSS。您需要使用它的方式：

<style scoped>现在支持 “深” 选择，可以影响孩子使用>>>组合子 组件：

.foo >>> .bar { color: red; }会被编译成：

.foo[data-v-xxxxxxx] .bar { color: red; }

更多关于the release page的资料vue-loader