0

I have successfully imported my Vue(Vueitfy) application in of my Wordpress website page. The problem i have is that it does not look or work the same as it does locally and when i upload it to my Wordpress page. Mostly the layout is different with some basic functionality that is not working as it should. What am i missing? How can i solve this? Could it also be with how i build my application using my webpack settings(i am super weak with webpack)

Here is an image showing the difference locally and in Wordpress:

enter image description here

enter image description here

The checkmark icons are different which suggested to me that its getting it from some global style variables from wordpress? I will post my webpack settings just incase somebody sees something that i dont. If you need any additional information please let me know and i will try to help you as fast as possible.

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
              },
            },
          },
        ],
      },
    ],
  }
}

1 Answer 1

2

It's not related to the web pack config. It's a CSS conflict problem. In your local version(Vue development stage) it only loads CSS files in the Vue app, but for the WordPress version, it loads all the CSS&JS files added by theme and plugins.

To fix it, you can dequeue the extra CSS files that cause the issue. But be careful. It will affect the other functionalities provided by the theme or the plugin. If you can't dequeue because of this reason, you should override the styles(CSS) in your Vue app CSS code.

5
  • Thank you for your answer. Yeah i suspected it was that. I have two questions. How do i know specifically which theme or plugin that is causing the chaos?
    – AppCodah
    Commented Nov 9, 2020 at 9:37
  • Hi AppCodah, You can check the css files by using the browser inspect tool. For example, you can check the checkmarks styling and find the CSS file which affected the styling. If you can't fix the issue, please contact me directly with the site info so that I can help you to fix the problem.
    – IWS
    Commented Nov 9, 2020 at 11:44
  • I found one of the culprits. It was in sources -> wp-content -> Divi -> style.css. Removing that whole file fixed many of my design issues but not all. What kind of site information would you need from me? I tried looking for an easy way to disable specific themes style on certain pages but with no success :/ I would appreciate if you could point me to the right direction. There is a solution to this and this is by running php server locally and running my sites whole html environment and then fixing the style by resetting css attributes to match my design which is not a way that i wanttosolve
    – AppCodah
    Commented Nov 9, 2020 at 15:50
  • 1
    Add me [email protected] on your skype and let me help you to fix the issue.
    – IWS
    Commented Nov 9, 2020 at 23:30
  • @Chengmin: Lord bless your kind soul for offering to help that person off-site!
    – Prid
    Commented Jul 29, 2022 at 1:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.