vue3 scss 封装滚动条样式

1：新建公共scss文件

@mixin scrollbar() {
    &::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none;
    }

    /* Track:轨道 */
    &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        // background: red;
        // background: white;
        box-shadow: none;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
    }
}

@mixin scrollbar_hover() {

    // background-color: red;
    /* width */
    &::-webkit-scrollbar {
        width: 6px;
    }

    /* Track:轨道 */
    &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        // background: red;
        // background: white;
        box-shadow: none;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background: #D3D2D6;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
        background: gray;
    }
}

           

2：在需要使用的元素中加入代码

<style  scoped>
.需要使用滚动条样式的class名 {
    background: #F8F8FA;
    width: 100px;
    overflow: auto;
    @include scrollbar();
}

.需要使用滚动条样式的class名:hover {
    @include scrollbar_hover();
}
</style>
           

3：在vite.config.js 或者vue.config.js 中

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/第一步创建scss的路径";',
      },
    },
  },
};