Vue:SCSS 样式不适用于服务,但仅适用于重新加载
Vue: SCSS styling not applied on serve, but on reload only
我目前正在做一个让我摸不着头脑的项目。
问题是我会为组件或页面设置一些 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"
发生这种情况是否有原因?我试着环顾四周,但找不到任何相关的东西。在这一点上,即使没有解决办法,我也只想知道是什么原因造成的...
原来我在 scss 中的样式结构有误...
我的结构为
nav{
navlink{}
}
显然需要的地方
nav{}
navlink{}
因此,如果您确实有问题,请检查并仔细检查您的结构...
前一天晚上它运行正常,但第二天决定在不更改代码的情况下不运行,这仍然很奇怪。但这也可能只是某种缓存问题。我不知道。
我目前正在做一个让我摸不着头脑的项目。
问题是我会为组件或页面设置一些 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"
发生这种情况是否有原因?我试着环顾四周,但找不到任何相关的东西。在这一点上,即使没有解决办法,我也只想知道是什么原因造成的...
原来我在 scss 中的样式结构有误...
我的结构为
nav{
navlink{}
}
显然需要的地方
nav{}
navlink{}
因此,如果您确实有问题,请检查并仔细检查您的结构...
前一天晚上它运行正常,但第二天决定在不更改代码的情况下不运行,这仍然很奇怪。但这也可能只是某种缓存问题。我不知道。