uniapp css样式规范 --- 全局样式与局部样式

uniapp css样式规范 — 全局样式与局部样式

全局样式

uni.scss文件中预置了一些全局样式scss变量，这些变量用于定义应用的整体样式风格
比如：文字颜色、背景颜色、边框颜色等等。 需要注意的是这个文件不要随意修改，如果要更改的话只能修改变量的值，不要修改变量的名。
那么如果我们希望增加一些自定义的全局样式，应该怎么去做呢？参考下面的方法：

• 首先，自己写一个样式文件，比如:app.scss ，该文件中自定义样式书写。将该文件放置于/static/style目录下
• 其次在app.scss文件的开头，引入uni.scss文件，引入语句为：@import ‘~@/uni.scss’; (这一步没有引入好像也是OK的)
• 最后在App,vue的样式中，引入这个自定义全局样式文件(如果使用的时候报错未定义,可以尝试把引入的位置往前放)

// app.scss
// 全局自定义的样式
$myColor-primary: #5582F3; // 全局主题色

//APP.vue
	@import "static/css/app.scss";

//使用的位置
.uni-page-head{
	background: $myColor-primary; // 导航栏背景色
}

局部样式

uniapp的局部样式实现是以vue文件为单位的，在某个vue文件内定义的样式，只在该vue的渲染范围内生效。