SCSS文件已保存但首页背景色未更新问题求助

问题详情 #

修改了full-width-split.scss中.full-width-split__one和.full-width-split__two的背景色，但首页显示的样式仍为旧值，浏览器审查元素的当前样式与预期样式对比如下：

当前加载的样式（来自build/style-index.css） #

.full-width-split {
  @include atMedium {
    display: flex;
  }

  &__one {
    flex: 1;
    padding: 1.6rem 16px;
    @include atMedium {
      padding: 40px;
    }

    .full-width-split__inner {
      @include atMedium {
        float: right;
      }
    }
  }

  &__two {
    flex: 1;
    background-color: $beige;
    padding: 1.6rem 16px;
    @include atMedium {
      padding: 40px;
    }
  }

  &__inner {
    @media (min-width: 1350px) {
      width: 610px;
    }
  }
}

预期生效的样式（已保存到full-width-split.scss） #

.full-width-split {
  @include atMedium {
    display: flex;
  }

  &__one {
    flex: 1;
    background-color: #ffffff;
    padding: 1.6rem 16px;
    @include atMedium {
      padding: 40px;
    }

    .full-width-split__inner {
      @include atMedium {
        float: right;
      }
    }
  }

  &__two {
    flex: 1;
    background-color: #faf0ca;
    padding: 1.6rem 16px;
    @include atMedium {
      padding: 40px;
    }
  }

  &__inner {
    @media (min-width: 1350px) {
      width: 610px;
    }
  }
}

解决步骤 #

1. 重新编译SCSS文件
   WordPress不会自动编译SCSS为CSS，必须手动触发编译：

   • 执行主题配套的编译命令，比如npm run build或gulp styles（具体命令看主题的package.json或gulpfile配置）。
   • 编译完成后检查build/style-index.css，确认新的背景色值已经写入文件。

2. 清除浏览器缓存
   浏览器可能缓存了旧的CSS文件：

   • 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，跳过缓存加载最新资源。
   • 或者在开发者工具的「网络」面板勾选「禁用缓存」，再刷新页面验证。

3. 清除WordPress及服务器缓存

   • 如果用了缓存插件（如WP Rocket、W3 Total Cache），进入后台找到插件的「清除缓存」按钮，清空全部缓存。
   • 若网站配置了CDN或服务器端缓存（如Nginx、Apache缓存），也需要在对应平台清空缓存。

4. 验证SCSS文件的导入关系
   确认full-width-split.scss被正确导入到主样式文件中：

   • 打开主题的主SCSS文件（如style.scss），检查是否有@import 'path/to/full-width-split';语句，路径必须准确，否则编译时不会包含该文件的修改。

5. 排查样式优先级冲突
   如果编译后新样式已存在但未生效，可能是被更高优先级的样式覆盖：

   • 在浏览器审查元素中查看.full-width-split__one/__two的样式列表，看是否有其他选择器（如ID选择器、行内样式）的背景色规则优先级更高。
   • 可临时添加!important测试（仅用于排查）：background-color: #ffffff !important;，若生效则说明存在优先级问题，需要调整选择器的权重（比如增加父级选择器）。

内容的提问来源于stack exchange，提问作者cube901