uni-app全局引入scss文件的不同方式

1. 使用config方式引入

在项目下创建vue.config.js文件

module.exports = {
	css: {
		loaderOptions: {
			scss: {
				prependData: `@import "~@/static/style/index.scss";`
			}
		}
	}
}

Tips：根据scss版本确定配置，版本低的使用“data”，高的使用“prependData”

在/static/style/index.scss文件中，引入其他的文件

index.scss

@import '@/static/style/common.scss';

 如果vue页面引用了common.scss中的全局变量；如果报错了，可以尝试：

在index.scss尾部加入：@import '@/uni.scss';

@import '@/static/style/common.scss';
@import '@/uni.scss';

2. 在App.vue中引入

在App.vue中引入scss文件

因为nvue页面的样式在编译时，有很多样式写法被限制了，这里需要注意，容易报错。

所以使用了  #ifndef App-NVUE  判断一下

3. 在uni.scss文件中引入

在/uni.scss中引入scss文件

---

2022-05-17：

补充：

前端常规使用scss的时候，可以这么写：

// main.scss
.a {
    color: red;
}

// index.vue


.b {
    @extend .a;
}

但是在uni-app中，如果main.scss是通过App.vue引入的话，以上的写法会报错；

只有在 uni.scss 中引入main.scss文件才可以使用@extend，并且不会报错。