用Dart Sass 替换 Node Sass

最近在看vue-element-admin项目文档的时候发现有个叫Dart Sass的东西，这东西可以替换之前我经常的Node Sass，曾几何我们在很痛苦的装Node Sass，现在我们是时候跟Node Sass说在再见了。具体内容请大家查看 Node Sass to Dart Sass

升级教程

yarn remove node-sass

yarn add sass -D

在上文提到的文档教程中提到：在替换完Node Sass后，需要用::v-deep代替/deep/和>>> (注:如果在css中直接这么写是没用作用的) 来进行样式穿透。最重要原因是 vue 3.0 RFC中指定的写法，我们这么写之后可以尽量的最大程度减少升级到Vue3的复杂度。

.a {
  >>> {
    .b {
      color: red;
    }
  }
}

/* 或者 */

.a {
  /deep/ {
    .b {
      color: red;
    }
  }
}

/* 修改为 */
.a {
  ::v-deep {
    .b {
      color: red;
    }
  }
}

不过我在读完 vue 3.0 RFC后发现，其实更推荐下面的写法

/* DEPRECATED */
::v-deep .bar {}

/* 用伪元素写法传入一个css选择器作为参数 */
::v-deep(.bar) {}

/* 上边的写法会编译为下边的样子 */
[v-data-xxxxxxx] .bar {}

此外还有两种scope css写法：
在 <style scoped> 代码快中使用 ::v-global()，在这代码块中是全局范围

::v-global(.foo) {}

/* 被编译为 */
.foo {}

专门修改slot插槽中元素的样式,你在子组件中修改插槽中样式是没用的，因为传入组件的插槽内容输入父组件，而Scoped styling是在编译时确定的,我们在子组件中可以这么写

::v-slotted(.foo) {}

/* 编译为 */
.foo[v-data-xxxxxxx-s] {}

注意-s（感觉像是slot的缩写）后缀，这表明这个样式只针对于slot中的内容

参考资料

Vue3教程，抢先学习