vue2/vue3中样式scss的mixin用法
前言:在vue2中我们使用scss的时候的一些方法挪移到vue3中,会出现一些问题,比如我们的配置文件都ok了,但是我们页面上使用@include wx() 会报错找不到这个mixin方法。vue2中scss:1、引入你的公共scss文件2、放入把我们的mixin方法// 宽高@mixin wh($width, $height){width: $width;height: $height;}//
·
前言:
在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%;
更多推荐
已为社区贡献20条内容
所有评论(0)