时间戳

首页 > 解决方案 > Wordpress 样式干扰了我的 Vue 应用程序的样式

css - Wordpress 样式干扰了我的 Vue 应用程序的样式

问题描述

我已成功将我的 Vue(Vueitfy) 应用程序导入我的 Wordpress 网站页面。我遇到的问题是，当我将它上传到我的 Wordpress 页面时，它的外观或工作方式与本地不同。大多数情况下，布局不同，一些基本功能无法正常工作。我错过了什么？我该如何解决这个问题？是否也与我如何使用我的 webpack 设置构建我的应用程序有关（我对 webpack 超级弱）

这是一张图片，显示了本地和 Wordpress 中的差异：

在此处输入图像描述

在此处输入图像描述

复选标记图标不同，这向我暗示它是从 wordpress 的一些全局样式变量中获取的？我会发布我的 webpack 设置，以防有人看到我没有看到的东西。如果您需要任何其他信息，请告诉我，我会尽快为您提供帮助。

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

标签： csswordpressvue.jswebpackstyles

解决方案

它与 webpack 配置无关。这是一个 CSS 冲突问题。在您的本地版本（Vue 开发阶段）它只加载 Vue 应用程序中的 CSS 文件，但对于 WordPress 版本，它会加载由主题和插件添加的所有 CSS&JS 文件。

要修复它，您可以将导致问题的额外 CSS 文件出列。不过要小心。它将影响主题或插件提供的其他功能。如果因为这个原因你不能出队，你应该在你的 Vue 应用程序 CSS 代码中覆盖样式（CSS）。

推荐阅读