记录vue样式穿透的方法 sass/stylus插件 Vue2项目

首先你需要构建一个vue2项目。过程省略然后在vue组件内使用了scoped 样式标签

scoped样式标签的作用是通过在标签上增加data-v-xxx自定义属性进行对每个页面样式的区分，
css3中 可以通过标签上的自定义标签定位出具体的样式表达式与’#’ 、‘.’、’div‘ 等类似

例如：此文章描述特点 css_属性选择器

https://blog.youkuaiyun.com/qq_39181017/article/details/106924448

引入sass/stylus过程

请参考以下文章安装，版本不适配可能会引起报错

       //可能出现    this.getOptions is not a function

安装sass-loader时报错
安装sytlus-loader时报错

引入了sass、stylus 后

需要在style标签上增加style=''属性“

scoped作用 vue通过在DOM结构以及css样式上加上唯一的标记 data-v-xxxxx，保证唯一，

<style lang="sass" scoped></style>

// or

<style lang="stylus" scoped></style>

例如遇到需要样式穿透的场景 — 举例 Swiper中

请参考以下文章安装
swiper各个版本在vue项目中应用
swiper避坑指南

代码效果

安装 运行 简单demo后的效果 指示器默认为蓝色。

可以用到sass/stylus样式穿透。

//sass
<style lang="scss" scoped>
/*  父元素  /deep / 目标元素 */
.swiper-pagination /deep/ .swiper-pagination-bullet-active{
  background-color: red;
}
</style>

// or


<style lang="stylus" scoped>
// 以下两者皆可
/*  父元素  /deep / 目标元素 */
.swiper-pagination /deep/ .swiper-pagination-bullet-active{
  background-color: red;
}

/*  父元素  >>> 目标元素 */
.swiper-pagination >>> .swiper-pagination-bullet-active{
  background-color: red;
}
</style>

样式穿透效果