Vue：SCSS 样式不适用于服务，但仅适用于重新加载

Question

我目前正在做一个让我摸不着头脑的项目。

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

这是我第一次进入该页面时该区域的样子。

这是同一区域在刷新时的样子

请注意，第二张图片上的填充已移除。这就是我想要的，那么为什么这不会在页面的第一次加载时发生。每次我重新提供页面或单击 link 从头重新打开页面时，都会发生这种情况，任何真正允许我第一次进入页面的东西。

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

SectionName 例如。仪表盘
- 工作（vue）
- 员工 (vue)
- 样式 (scss)

然后样式 sheet 将包含在 vue 文件中，文件末尾带有样式导入标签。

到目前为止，这并不是唯一的样式设置案例。还有一些其他人也这样做，都是小事。我原以为是样式 sheet 没有正确耦合，但文件中定义的其他样式更改得到应用而没有失败。参考上面的示例，其他选项卡上的灰色背景以相同的样式 sheet 定义并被应用。

此时我的依赖如下：

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

发生这种情况是否有原因？我试着环顾四周，但找不到任何相关的东西。在这一点上，即使没有解决办法，我也只想知道是什么原因造成的...

Answer 1

原来我在 scss 中的样式结构有误...

我的结构为

nav{
 navlink{}
}

显然需要的地方

nav{}
navlink{}

因此，如果您确实有问题，请检查并仔细检查您的结构...

前一天晚上它运行正常，但第二天决定在不更改代码的情况下不运行，这仍然很奇怪。但这也可能只是某种缓存问题。我不知道。

Vue：SCSS 样式不适用于服务，但仅适用于重新加载

Vue: SCSS styling not applied on serve, but on reload only

html

css

sass

vuejs2

bootstrap-vue