UniApp Web中Scoped样式灵活控制

前言

郑重承诺以下内容不依赖AI生成

最近在开发一个基于 uni-app 和 Vue3 的项目时，运行到 Web 端时遇到了一个奇怪的问题：页面中明明没有写 scoped 样式，但实际效果却如同开启了 scoped 一样，全局样式无法生效。经过排查，发现原因是 uni-app 默认对每个页面都添加了 scoped 属性。本文将介绍如何解除这一限制。

测试代码

以下是用于复现问题的测试模板代码，方便读者对照：

<template>
  <view class="page">
    <view class="hero">
      <text class="eyebrow">Main packagetext>
      <text class="title">Rattail array helperstext>
      <text class="desc">
        This page lives in the main package and imports functions from rattail.
      text>
    view>    <view class="card">
      <text class="label">sourcetext>
      <text class="code">{{ sourceText }}text>
    view>    <button class="button" @click="goSubPackage">
      Open sub package rattail demo
    button>
  view>
template><script setup>
import { computed } from 'vue'
import { isString } from 'rattail'const numbers = [1, 2, 2, 3, 4, 4, 5, 6]const sourceText = computed(() => isString(numbers)  'A string' : 'Not a string')function goSubPackage() {
  uni.na vigateTo({
    url: '/pages/sub/rattail/index',
  })
}
script>// 这里并没有添加 scoped
<style>
.page {
  min-height: 100vh;
  padding: 40rpx 32rpx;
  background: linear-gradient(135deg, #fff7e6 0%, #e9f7ef 48%, #e8f1ff 100%);
  box-sizing: border-box;
}.hero {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  margin-bottom: 28rpx;
}.eyebrow {
  color: #2f6f55;
  font-size: 24rpx;
  font-weight: 700;
  letter-spacing: 4rpx;
  text-transform: uppercase;
}.title {
  color: #16231e;
  font-size: 44rpx;
  font-weight: 800;
}.desc {
  color: #52615b;
  font-size: 28rpx;
  line-height: 1.6;
}.card {
  padding: 28rpx;
  margin-bottom: 22rpx;
  border: 2rpx solid rgba(22, 35, 30, 0.08);
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 18rpx 40rpx rgba(47, 111, 85, 0.1);
}.label {
  display: block;
  margin-bottom: 14rpx;
  color: #2f6f55;
  font-size: 24rpx;
  font-weight: 700;
}.code {
  color: #16231e;
  font-family: Menlo, Consolas, monospace;
  font-size: 24rpx;
  line-height: 1.6;
  white-space: pre-wrap;
}.button {
  margin-top: 18rpx;
  color: #ffffff;
  background: #1f7a5a;
  border-radius: 999rpx;
  font-weight: 700;
}
style>

注意观察，以上代码中的 标签并未添加 scoped 属性，但项目运行后样式仅对当前组件生效——这正是 uni-app 默认行为所导致的问题。

解决方案

解决方法较为简单，根据项目类型分为两种情况：

cli 项目：找到 node_modules/@dcloudio/uni-h5-vite/dist/index.js 文件，将其中与 uniCssScopedPlugin 相关的部分注释掉即可。

HBuilderX 项目：路径稍长，位于 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vite/dist/index.js，同样找到 uniCssScopedPlugin 进行注释操作。

运行效果

完成注释后刷新页面，全局样式即可正常生效。效果如下图所示：

写在最后

感谢您耐心阅读本文，希望能帮助您节省排查问题的时间。若仍有疑问，欢迎留言交流。