vue2vue3中样式scss的mixin用法

前言：

在vue2中我们使用scss的时候的一些方法挪移到vue3中，会出现一些问题，比如我们的配置文件都ok了，但是我们页面上使用@include wx() 会报错找不到这个mixin方法。

vue2中scss:

1、引入你的公共scss文件

2、放入把我们的mixin方法

// 宽高
@mixin wh($width, $height){
	width: $width;
	height: $height;
}
// 圆角边框
@mixin border-radius($radius) {
  border-radius: $radius;
}

3、注册我们的mixin方法

4、在vue.config.js中配置我们的css

// css相关配置
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        data: `@import '@assets/scss/main.scss';`
      }
    },
  },

5、重启服务

6、页面上直接使用：

#app{
    @include wh(100%, 100%);
  }

到页面上就是

width:100%;
height:100%;

vue3中scss

1、引入你的公共scss文件

2、放入把我们的mixin方法

// 宽高
@mixin wh($width, $height){
	width: $width;
	height: $height;
}
// 圆角边框
@mixin border-radius($radius) {
  border-radius: $radius;
}

3、main.js注册我们的入口文件 main.scss,此外，不在main.scss里面注册mixin方法

import '@/assets/scss/main.scss'

4、在vue.config.js中配置我们的mixin方法

// css相关配置
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import '@/assets/scss/helpers/_mixins.scss';`
      }
    },
  },

5、重启服务

6、页面上直接使用：

#app{
    @include wh(100%, 100%);
  }

到页面上就是

width:100%;
height:100%;