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