Vue使用Scoped属性后部分标签设置样式不生效 || /deep/语法报错并且无法启动项目

1 Scoped属性作用

当 <style> 标签设置 scoped 属性后，它的 CSS 只作用于当前组件中的元素(本地和全局的概念).情况如下:

使用 scoped 后，父组件的样式将不会渗透到子组件中。

不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响(所以有时候给子组件设置的属性会发现不起作用)。

在vue官方文档的vue-loader中看到如下解决方法：

2 解决方案

2.1 页面中混用本地和全局样式

一个组件中同时使用有 scoped 和非 scoped 样式.这个思路挺绝.

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

借助这种思路,其实也可以把一些子组件的一些属性设置到全局属性中,这样一些不起作用的属性会因为全局设置起作用,不过后期维护会比较乱,还是不太建议把子组件的样式突兀的放到全局中!!!

2.2 借助深度作用选择器<Deep>

官方解释

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

::v-deep .liList {
  list-style-type: none;
  padding: 3px;
}

使用了::v-deep后,可能还不起作用,是可能受到了less或scss的影响,不能在层级嵌套中使用.

3 一些错误:/deep/语法报错并且无法启动项目解决

同时一些使用了/deep/ 的程序可能会报错:

 

原因:因为使用了less或scss的原因

解决方法:利用::v-deep代替/deep/

参考:VUE_vue使用/deep/报错并且无法启动项目完美解决，/deep/编辑器标红解决