Vue:SCSS样式不适用于发球,但仅适用于重新加载

我目前正在做一个让我挠头的项目。

问题是,我会为组件或页面设置一些SCS样式-保存并运行组件,但更改不可见。刷新页面,就会出现更改。

这就是我第一次进入页面时所讨论的区域的样子。

这是刷新时相同区域的外观

请注意,第二个图像上的填充已删除。这就是我想要的,为什么在第一次加载页面时不会发生这种情况呢。每次我重新服务页面或单击链接从头开始重新打开页面时,都会发生这种情况,任何真正允许我第一次进入页面的事情。

这是一个Vue项目,对大多数组件使用引导Vue。组件的所有自定义样式都是在Vue组件文件中包含的SCSS文件中完成的。因此,文件结构的典型设置是:

• SectionName(仪表板除外)
  • 作业(vue)
  • 员工(vue)
  • 样式(scss)

然后,该样式表将包含在vue文件中,并在文件末尾添加一个样式导入标记。

到目前为止,这并不是唯一一种可以做到这一点的样式。还有一些人也能做到这一点,都是些小事。我原以为是样式表没有正确耦合,但文件中定义的其他样式更改都得到了应用。参考上面的示例,其他选项卡上的灰色背景在同一样式表中定义并应用。

此时,我的依赖关系如下:

"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"

发生这种情况有什么原因吗?我试着四处看看,但找不到任何相关的东西。在这一点上,我会满足于只知道是什么导致了这一点,即使没有修复。。。