'Why is my frontend code behaving differently locally versus production?

Currently just a BootstrapVue VueJS frontend project I have, I have 4 playing cards that I would ideally like to keep on one line/row (as it does locally), but stacks when I view it in production (using Heroku, if it makes a difference)

Localhost vs Production

Currently the code for this is like:

    <div 
        flex-wrap="nowrap" 
        class="row d-flex nowrap mt-3" 
        justify-content="space-between" 
        width="100vw"
    >
        <b-container>
            <b-row>
                <b-col>
                    <PlayingCard/>
                </b-col>
                ....etc for the other cards....
             </b-row>
        </b-container>
    </div>

I've played around a lot with different classes and justify-contents and all that stuff, but continually get different local vs prod results. And I can confirm the code on Heroku is up to date because it redeploys with each new commit and I've added some new features since attempting to fix this styling issue and those appear properly.

vue.jsherokubootstrap-vue


Solution 1:[1]

Styling issues like that are most commonly due to scoping issues of your CSS. If you inspect the element locally you will likely see that only the local styling has been applied, while if you inspect the element in production, you will see that either the selector contains more CSS (due to identical selectors in two different components), or another selector is applied altogether.

You are getting this problem, because in dev-mode it only loads the CSS of the components you are viewing. In production mode, all the CSS of all components is combined.

To solve the problem, you have several options:

  1. You can use the scoped attribute on your style tag. Vue will automatically add a data-attribute on your component, and scope the styling using that data attribute. This does commonly not work nicely with things like popups that are moved out of their previous location.
<template>
  <div>
    <!-- something here -->
  </div>
</template>

<script>
export default {
  //...
}
</script>

<style scoped>
button {
  // This only styles the buttons in this component, rather than every button in the application
}
</style>
  1. If you need to style sub-components as well, you can just use a class on your root element and style everything relative to that. You would need to make that class a unique name in your application, but if you just use the name of your component that shouldn't be a problem.
<template>
  <div class="comp-card">
    <!-- something here -->
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style lang="scss">
.comp-card {
  button {
    // All buttons that are descendants of our component are now styled.
  }
}
</style>

Solution 2:[2]

I see two issues with the given code, addressing these may not resolve your issue, but may remove some interference.

  1. Bootstrap provides the class .flex-nowrap for applying flex: nowrap – it should be noted that nowrap is the default behaviour of flexbox, and this may not be needed anyway.

  2. Some attributes in your div appear to be style declarations, and ought to be in the [style] attribute as shown below, or a <style> tag if using SFCs

<div 
  class="row d-flex mt-3"
  style="justify-content: space-between; width: 100vw"
>

Solution 3:[3]

Caching of applicable files can vary between local and production environments.

Browsers accessing production servers may cache older versions of files and make it appear that the change was not made. The server may have newer files than what the browser is using.

Solution 4:[4]

UI changes in production might be issue of CSS Optimization in build process of vue cli.

Did you try to serve/run build locally if it works then it might issue on production site/cache/browser etc. Try local build with serve or any other tool to verify.

If css optimization issue in build then re-configure build config with underlying tool like webpack or vite etc whichever used.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sumurai8
Solution 2 Jason Hibbs
Solution 3 JohnH
Solution 4

Related Questions