vue.js vue-cli incorrectly compiles scss styles

Ascolon 0
Viewed 19

I have scss styles and they do not work in the production build

source styles

   .app-otp-input {
      :deep() {
    
        .v-input__slot {
          max-height: 40px;
          min-height: 40px;
          margin-bottom: 0 !important;
          background: var(--v-primary-lighten-base) !important;
        }
      }
    }

When I run a on localhost, that scss build matches the css styles. These styles work as expected.

.app-otp-input[data-v-9c79ecee] .v-input__slot {
    max-height: 40px;
    min-height: 40px;
    margin-bottom: 0 !important;
    background: var(--v-primary-lighten-base) !important;
}

but when i run production build my scss styles compile to

.app-otp-input :deep() .v-input__slot[data-v-9c79ecee]{
  max-height:40px;
  min-height:40px;
  margin-bottom:0!important;
  background:var(--v-primary-lighten-base)!important
}

and it doesn't work I can't figure out why this is happening. How to properly assemble styles for a production build

My dependencies

"dependencies": {
    "vue": "^2.7.10",
  },

"devDependencies": {
    "@storybook/vue": "^6.5.10",
    "@vue/cli-service": "~4.5.9",
    "vue-loader": "15",
    "vue-template-compiler": "^2.7.10",
  }
vue-cli sass vue.js
1 Answers

They removed the need for vue-template-compiler in vue 2.7. Have you tried removing it from your build steps?

From Vue Site

You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

Steven Spungin0
Related