css scoped和moudle

scoped css

官方文档

缺点

一、如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。

二、根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重了：

即理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改，而且要注意权重问题，0.0迫不得已再使用!important。

三、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性：

所以一般父组件如果加了scoped，会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。

深度作用选择器：

css可以使用 >>>

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

 

css module

官方文档

 

css module需要增加css-loader配置才能生效，具体可看文档的实现。

 

注意

 

如果你使用的是style-loader，如果想让配置生效需要更换到文档所述的vue-style-loader（是vue-loader的一个依赖，无需单独安装）。

 

二者区别可以从这里了找vue-style-loader

全局的样式改变，也可以深度作用于封装的子组件选择器：

:global {
  .global-class-name {
    color: green;
  }
}

 

:global switches to global scope for the current selector respective identifier. :global(.xxx) respective @keyframes :global(xxx) declares the stuff in parenthesis in the global scope.

 

Similarly, :local and :local(...) for local scope.

 

If the selector is switched into global mode, global mode is also activated for the rules. (This allows us to make animation: abc; local.)

 

Example: .localA :global .global-b .global-c :local(.localD.localE) .global-d