问题重现：
1
2
3
4
5
6
|
<style lang="less" scoped>
page {
background-color: red;
height: 100%;
}
</style>
|
这段样式目标是为了设置整个页面的背景色，但是在微信小程序中没有任何作用，原因在于 style标签上存在scoped属性，在编译后的 wxss 文件中可以看到，这段样式被编译成了：
1
2
3
4
|
page.data-v-475a72fb {
background-color: red;
height: 100%;
}
|
scoped指定了style标签内的样式都是具有作用域的，所以这个页面内的每个元素都认为添加了data-v-hash类名，也是为了保证类名在项目内的唯一性。但是微信小程序中的page作为页面的根节点，不会带有data-v-hash类名，所以要想解决这个问题需要这么改:
1
2
3
4
5
6
7
|
<style lang="less">
/* 去掉scoped属性 ，就不会在这里编译后的page后添加data-v-hash的类名*/
page {
background-color: red;
height: 100%;
}
</style>
|