I am currently working on a project that has me scratching my head.
The problem is that I would set some SCSS styling for the component or the page - save and run the component but the changes wont be visible. Refresh the page and the changes would be there.
This is what the area in question would look like when I first enter the page.
This is what the same area looks like on the refresh
Note that the padding is removed on the second image. This is what i want, so why does this not happen on the first load of the page. This happens every time I re-serve the page or click on the link to reopen the page from the start, anything really that allows me to enter the page for the first time.
This is a Vue project that makes use of Bootstrap-Vue for most components. All custom styling for a component is done in a SCSS file included with the Vue component file. So a typical set-up for the file structure would be:
- SectionName ex. Dashboards
- jobs (vue)
- employees (vue)
- style (scss)
The style sheet would then be included in the vue file with a style import tag at the end of the file.
This is by far not the only case of styling that does this. There is a few others that do this as well, all of them small things. I would have thought that it was that the styling sheet isnt being properly coupled but the other styling changes defined in the file gets applied without fail. Referring to the example above the grey background on the other tabs is defined in the same style sheet and gets applied.
My dependencies at this point in time is as follows:
"bootstrap-vue": "^2.19.0",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"node-sass": "^5.0.0",
"particles-bg-vue": "^1.3.5",
"sass-loader": "^10.1.0",
"vue": "^2.6.11",
"vue-chartjs": "^3.5.1",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
Is there a reason for this happening? I have tried looking around but I cant find anything that relates. And at this point I would settle for just know what causes this even if there is no fix...
