Search code examples
csswordpressvue.jswebpackstyles

Wordpress style is interfering with my Vue application's style

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

  • 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.