Vue scss build does not work properly

Hi, I am trying to figure out why does my npm run build does not build scss properly. The component is shown how it should be on the local but as soon as I upload that css from dist after build on server, component does not look right.

Local scss

<style scoped>
#projects {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    position: relative;

    & .project {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: fit-content;

        h3 {
            font-size: 1.5rem;
            margin-bottom: 0;
            color: #fff;
        }

        p {
            font-size: .9rem;
            color: rgba(205, 205, 205, 0.5);
        }

        a {
            text-decoration: none;
            color: #379ddc;
            font-size: .9rem;
            text-transform: capitalize;
            margin-top: 1rem;
            display: inline-block;
        }

        .visual {
            img {
                width: 100%;
            }
        }

        &:nth-child(even) {
            flex-direction: row-reverse;

            & .visual {
                width: calc(50% - 2rem);
                padding-right: 2rem;
            }

            & .description {
                width: calc(50% - 2rem);
                padding-left: 2rem;
            }
        }

        &:nth-child(odd) {
            & .visual {
                width: calc(50% - 2rem);
                padding-left: 2rem;
            }

            & .description {
                width: calc(50% - 2rem);
                padding-right: 2rem;
            }
        }
    }

    &:after {
        content: '';
        height: 100%;
        width: 4px;
        bottom: 0;
        left: 50%;
        background: white;
        position: absolute;
        background: radial-gradient(at center, #379ddc, transparent 70%);
    }
}

From browser (local):

#projects[data-v-e690e1a2] {
    & .project[data-v-e690e1a2] {
        &[data-v-e690e1a2]:nth-child(2n+1) {
            & .visual[data-v-e690e1a2] {
                width: calc(50% - 2rem);
                padding-left: 2rem;
            }
        }
    }
}

From browser (live):

#projects[data-v-080e2a0b] {
    & .project[data-v-080e2a0b] {
        .visual[data-v-080e2a0b] {
        }
    }
}

LaryAI

1 year ago

Level 58

It looks like the issue you're experiencing is related to the scoped styles in your Vue components. When you use scoped styles, Vue adds unique data attributes to your elements to ensure that the styles are applied only to the specific component. However, it seems that the build process is not preserving these styles correctly when you deploy to the server.

Here are a few steps you can take to troubleshoot and resolve this issue:

Check your build configuration: Ensure that your build configuration is correctly set up to handle SCSS and scoped styles. If you're using Vue CLI, this should be handled automatically, but it's worth double-checking.
Inspect the build output: Compare the CSS output from your local build and the server build. Look for any discrepancies in the generated CSS, especially the data attributes.
Ensure consistent environment: Make sure that the environment in which you are building locally is the same as the one on the server. Differences in Node.js versions, npm versions, or other dependencies can sometimes cause issues.
Check for caching issues: Sometimes, browsers cache old versions of CSS files. Make sure to clear your browser cache or use a hard refresh to ensure you're loading the latest CSS.
Verify deployment process: Ensure that the deployment process is correctly copying all necessary files, including the CSS files, to the server.

Here is an example of how you might configure your Vue project to handle SCSS and scoped styles correctly:

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
};

Example Component

<template>
  <div id="projects">
    <div class="project">
      <div class="visual"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Projects'
};
</script>

<style scoped lang="scss">
#projects {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .project {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: fit-content;

    &:nth-child(2n+1) {
      .visual {
        width: calc(50% - 2rem);
        padding-left: 2rem;
      }
    }
  }
}
</style>

Build and Deploy

Build the project:
```
npm run build
```
Deploy the dist folder to your server: Ensure that all files in the dist folder are correctly uploaded to your server.

By following these steps, you should be able to identify and resolve the issue with your SCSS not building properly for deployment. If the problem persists, consider providing more details about your build setup and deployment process for further assistance.