CODEWITHSUNDEEP
cssvue.js
Mir Stephen
Mir Stephen

Reputation: 1927

Styles don't apply on CSS scoped component

I have following simple component:

<template>
    <div>
        <b-form-group label="From:" label-align="left" label-for="nested-from">
            <date-pick :displayFormat="'DD/MM/YYYY'" v-model.trim="search_form.date_from"></date-pick>
          </b-form-group>
        </b-col>
    </div>
</template>

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

<style scoped lang="scss">
@import "~vue-date-pick/src/vueDatePick.scss";

.vdpComponent.vdpWithInput > input {
  @extend .form-control !optional;
  display: block;
  border: 5px solid blue !important;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
</style>

here is the screenshot on console:

enter image description here

This's just a sample of a big project, basically I have an input in my component and styles don't get applied to it, but if I remove scoped then everything is back on track, but I want to keep it in scoped level.

I searched a bit and find this answer from SO:

For some reason, scoped styles don't get applied during hot reload when they are first added to the component. Full page reload fixes the issue, from there the styles, since they have been detected, get updated with consecutive hot reloads.

This answer is not convincing, like for what reasons? and how do I avoid it and fix the problem? How do I do a full hot reload when the home page is loaded?

I tried refreshing the page? rerunning the dev server, but still didn't work? Can anyone help? Thanks in advance.

Upvotes: 2

Views: 2952

Answers (1)

kissu
kissu

Reputation: 46594

As told in the previous comments, since you're using SCSS here and targeting a 3rd party component, you need to write it this way

::v-deep .vdpWithInput input {
  // your fancy style here
}

It will help having it scoped in this specific component and not bleeding all over your app.

Useful link for the deep selectors: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Upvotes: 5

Related Questions