uniapp——如何配置scss和uview ui框架

一、scss项目配置步骤

1.APP.vue 设置：lang="scss" <style lang="scss"></style>

2.uni.scss 引用：global.scss文件 @import '@/static/css/common/global.scss';

3.global.scss文件根据项目需求自行添加相应变量

4.页面中设置 <style lang="scss" scoped></style>

scoped：避免页面样式污染

二、配置uview

1.将uview-ui拷进项目

2.在pages.json文件最上面添加
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

3.在APP文件中引用以下scss
<style lang="scss">
/*每个页面公共css */
@import "uview-ui/index.scss"; //引用uview-ui框架样式
@import "./static/css/common/iconfont.css"; //引用字体样式库
@import "./static/css/common/global.scss"; //引用自定义变量
</style>

4.在uni.scss文件中引用以下scss
@import 'uview-ui/theme.scss'; //uView UI的集成样式文件
@import '@/static/css/common/global.scss'; //项目自定义scss变量

5.在main.js 引入全局uView
import uView from 'uview-ui'
Vue.use(uView);