css - 本地 Wordpress 站点呈现 css 与本地 Web 服务器不同

Question

我要疯了，试图解决这个问题。所以基本上我已经编写了一个静态 HTML-CSS 页面，以便在 Wordpress 自定义主题中实现它。

我在页脚中有三个社交按钮，在静态主题中它们工作正常（我正在使用带有 HtmlWebpackPlugin 的 webpack 进行本地前端开发）。它们是列表元素内的三个链接：

<ul class="li-h li-h-centered">
  <li class="s-hover-facebook">
    <a href="#">
      <i class="fab fa-facebook-f"></i>
    </a>
  </li>
  <li class="s-hover-instagram">
    <a href="#">
      <i class="fab fa-instagram"></i>
    </a>
  </li>
  <li class="s-hover-twitter">
    <a href="#">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>

驱动整个事情的 CSS 是（实际上是 SCSS，但你明白了）

&__social {
padding: .5em 2em;
&>ul>li>a {
  display: block;
}
&>ul>li {
  display: inline-block;
  border-radius: 50%;
  margin: 0 .2em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: #333;
}
font-size: 1.8em;
}

静态网站中的结果是：

Wordpress 网站中的结果是这样的：

我真的不知道这里发生了什么，有什么建议吗？

标签： csswordpresswampserverhtml-webpack-plugin