1. 问题描述
在使用uniapp开发小程序时，修改样式发现不生效，造成页面显示的样式不如预期。本文将介绍如何解决这个问题。
2. 问题解决
2.1 修改全局样式
在uniapp中，想要修改全局样式，需要在项目根目录下的App.vue文件中以<style>标签的形式编写样式。但是有时候修改样式却不生效，这是为什么呢？
要解决这个问题，我们需要知道样式在小程序中的加载顺序。小程序会优先加载组件内的样式，然后才是全局样式。如果在组件内有与全局样式相同的属性，那么组件内的样式会覆盖全局样式。
因此，如果我们想要修改全局样式，可以在组件内把相同样式的属性设置为默认值或者重置。
/* App.vue */
<template>
<view>
<!-- ... -->
</view>
</template>
<script>
export default {
name: 'App',
mounted () {
// ...
}
}
</script>
<style>
/* 重置默认的颜色和字体 */
:root {
--text-color: black;
--font-family: 'PingFang SC';
}
/* ... */
</style>
2.2 修改组件样式
如果要修改组件的样式，有两种方式。一种是使用scoped属性给样式设置作用域，另一种是使用深度选择器。
使用scoped属性
在组件中使用<style scoped>标签，可以让样式只在当前组件中生效。但是这种方式也有一些限制，比如无法修改父组件中的样式。
使用深度选择器
如果要修改父组件样式，可以在选择器中使用::v-deep伪类，这样就可以穿透父组件的scoped属性了。
/* A.vue */
<template>
<div class="box">
<!-- ... -->
</div>
</template>
<script>
export default {
name: 'A'
}
</script>
<style scoped>
/* 只在组件A中生效的样式 */
.box {
color: blue;
}
/* 这里可以修改全局样式 */
::v-deep .box {
color: red;
}
</style>
使用深度选择器时需要注意，这样会让样式变得不可控，容易造成样式冲突。所以应该尽量避免使用这种方式。
2.3 异步加载样式
可能有些时候，修改样式仍然不生效。这时候我们可以把样式文件以<link>标签的形式异步加载。
在main.js中，需要监听uniapp生命周期函数onLaunch，当小程序启动时再动态加载样式文件。
/* main.js */
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.mixin({
onLaunch() {
// 异步加载样式文件
const link = document.createElement('link')
link.href = 'http://example.com/styles.css'
link.rel = 'stylesheet'
document.head.appendChild(link)
}
})
const app = new Vue({
...App
})
app.$mount()
这样就能确保样式文件在小程序启动时就被加载了，确保样式生效。
3. 总结
在uniapp开发小程序时，修改样式不生效的问题非常常见。可以通过修改全局样式、使用scoped属性或深度选择器来解决大部分问题。如果问题依然存在，可以尝试异步加载样式文件。同时，为了避免样式冲突，需要尽量避免使用深度选择器。