element ui中使用 mixin.scss文件（单文件使用，多文件使用）

1.首先新建mixin文件
mixin.scss

//滚动条样式
@mixin scrollbar($width, $border-radius) {overflow-y: auto;scrollbar-width: thin;&::-webkit-scrollbar {width: $width;}&::-webkit-scrollbar-thumb {border-radius: $border-radius;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #B9BAC9;}&::-webkit-scrollbar-track {box-shadow: unset;background: #5E5D6E;border-radius: $border-radius;}@media screen and (min--moz-device-pixel-ratio:0) {scrollbar-width: thin;}
}
$white: #ffffff;
$white2: rgba(255, 255, 255, 0.2);
$black: #000000;
$greyb6: #B6B6B6;$modalLight: #2b2a39;
$modalDark: #1b1b2a;

2.单文件使用
在style中先引入该文件

@import url('../assets/css/mixin.scss');

使用

@include scrollbar(5px,7px);

3.全局使用
vue.config.js文件 配置loader

module.exports = {//配置全局样式变量css: {loaderOptions: {sass: {data: `@import "@/assets/css/mixin.scss";` // 我使用的 sass-loader 7.0.1版本的，参数是data// sass-loader 12.0.0版本的参数则是 additionalData// sass-loader v8 参数名为 prependData}}}
}

使用
直接在style中使用即可

@include scrollbar(5px,7px);

全局配置记得重启项目生效，因为修改了vue.config.js文件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！