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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM