传统的vue项目中:可以直接在项目入口文件main.js中引入csss可以正常解析

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "./assets/css/global.css"

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在这里插入图片描述

在uiapp中与传统vue项目的引入是有区别的,不能在入口文件中引入css不解析的

解决方案:在app.vue文件的css文件中引入

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
	uni-page-body {
		// height: 100vh;
	}
	/* #ifdef H5 */
	uni-page-head {
		display: none;
	}
	/* #endif */
</style>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐