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);