样式不适用于 CSS 范围组件答案

【问题标题】：Styles don't apply on CSS scoped component样式不适用于 CSS 范围组件
【发布时间】：2021-04-25 16:45:28
【问题描述】：

我有以下简单的组件：

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

这是控制台上的截图：

这只是一个大项目的示例，基本上我的组件中有一个输入并且样式不会应用到它，但是如果我删除scoped，那么一切都会回到正轨，但我想保持它在作用域级别。

我搜索了一下，从 SO 中找到了这个答案：

由于某种原因，首次将作用域样式添加到组件时，它们不会在热重载期间应用。整页重新加载解决了这个问题，从那里样式，因为它们已被检测到，通过连续的热重新加载来更新。

这个答案没有说服力，请问是什么原因？以及如何避免它并解决问题？主页加载时如何进行完全热重载？

我尝试刷新页面？重新运行开发服务器，但仍然没有工作？任何人都可以帮忙吗？提前致谢。

【问题讨论】：

您是否尝试过使用class 或id 选择器来应用样式？
是的，到目前为止我都试过了
试试display: inline-block!important
我试过这个`边框：5px纯蓝色！重要;`它不起作用。但是如果我从控制台应用这种样式，它可以在没有 important 的情况下工作。
请提供完整代码以便我们查看。您作为示例提供的代码没有任何范围或子组件深度选择器问题。

标签： css vue.js

【解决方案1】：

正如之前的 cmets 所说，由于您在这里使用 SCSS 并针对 3rd 方组件，因此您需要这样写

::v-deep .vdpWithInput input {
  // your fancy style here
}

这将有助于将其限定在这个特定的组件中，而不是在你的应用程序中流血。

深度选择器的有用链接：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

【讨论】：