Here is a basic component example that I'm working with:
<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>
I have encountered an issue where the styles applied in the scoped level are not taking effect on an input element within the component. If I remove scoped, the styles work fine, but I prefer to keep it scoped.
After researching, I came across this explanation from SO:
For some reason, scoped styles may not be applied during hot reload when first added to the component. A full page reload seems to resolve the issue, allowing subsequent hot reloads to update the styles properly.
This explanation leaves me questioning why this occurs and how can I prevent it in order to fix the problem. Is there a way to trigger a full hot reload when the home page loads?
I have tried refreshing the page and restarting the dev server without success. Any assistance would be greatly appreciated. Thank you.