Css 为什么没有在nuxt页面中加载作用域样式？

在nuxt站点中，我有两个freshsales表单作为单独的组件（例如formA和formB）。我的书写样式覆盖了默认表单样式，默认表单样式的作用域是这些表单组件。但当我在页面中使用它们时，不会加载和应用作用域样式

如果我在没有作用域的情况下尝试相同的方法，我会得到应用的样式。但是formA样式也会应用于使用formB组件的任何页面。（这与nuxt/vue应用程序有关）

为什么我的作用域样式不起作用

我将在下面留下示例代码

//contactForm.vue //xxx表示唯一的id

<template>
  <div>
    <script
      src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
      crossorigin="anonymous"
      id="xxxxx"
    ></script>
  </div>
</template>
<style scoped>

.fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
.fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block;
}
.fserv-field:nth-child(5){
   width: 140px;
   padding: 0;
  display: inline-block;
}
@media screen and (max-width: 360px) {
  .fserv-field:nth-child(3) {
    width: 135px;
  }
  .fserv-field:nth-child(5) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   .fserv-field:nth-child(3),.fserv-field:nth-child(5) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>

.fserv表格{
边界半径：10px；
填充：20px；
位置：相对位置；
字体系列：Arial，无衬线；
}
.fserv字段：第n个子项（3）{
宽度：187px；
右侧填充：5px；
显示：内联块；
}
.fserv字段：第n个子项（5）{
宽度：140px；
填充：0；
显示：内联块；
}
@媒体屏幕和屏幕（最大宽度：360px）{
.fserv字段：第n个子项（3）{
宽度：135px；
}
.fserv字段：第n个子项（5）{
宽度：110px；
}
}
@介质屏幕和（最大宽度：986px）和（最小宽度：525px）{
.fserv字段：第n个子项（3），.fserv字段：第n个子项（5）{
宽度：100%；
填充：0 30px/*！*用于引导3*的日期时间选择器！版本：4.7.14*https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
显示：块；
}
}

//register.vue

  <template>
          <div>
            <script
              src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
              crossorigin="anonymous"
              id="xxxxx"
            ></script>
          </div>
        </template>
    <style scoped>

.fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
.fserv-field{
  padding: 40px !important;
}
.fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block !important;
}
.fserv-field:nth-child(4){
   width: 140px;
   padding: 0;
  display: inline-block !important;
}
@media screen and (max-width: 360px) {
  .fserv-field:nth-child(3) {
    width: 135px;
  }
  .fserv-field:nth-child(4) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   .fserv-field:nth-child(3),.fserv-field:nth-child(4) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>

.fserv表格{
边界半径：10px；
填充：20px；
位置：相对位置；
字体系列：Arial，无衬线；
}
.fserv字段{
填充：40px！重要；
}
.fserv字段：第n个子项（3）{
宽度：187px；
右侧填充：5px；
显示：内联块！重要；
}
.fserv字段：第n个子项（4）{
宽度：140px；
填充：0；
显示：内联块！重要；
}
@媒体屏幕和屏幕（最大宽度：360px）{
.fserv字段：第n个子项（3）{
宽度：135px；
}
.fserv字段：第n个子项（4）{
宽度：110px；
}
}
@介质屏幕和（最大宽度：986px）和（最小宽度：525px）{
.fserv字段：第n个子项（3），.fserv字段：第n个子项（4）{
宽度：100%；
填充：0 30px/*！*用于引导3*的日期时间选择器！版本：4.7.14*https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
显示：块；
}
}

我试图在两个不同的页面中使用这些组件。但问题是，如果我将样式设置为作用域，则不会应用任何作用域样式。如果我删除了作用域，则会应用两个页面上的联系人表单样式

任何正确的方法都可以做到这一点。我希望对每个表单分别应用样式（就像我使用css选择器选择这样的字段

。fserv field:nth child（4）

）

或者有没有更好的方法来选择没有冲突的表单字段。字段顺序类似于3,4（在contactForm中）而不是3,5。（以登记册形式）

---

谢谢大家!

您应该使用运营商Vue提供的

>

。它将允许您在使用

作用域

的同时设置任何子组件的样式，并且不会产生任何冲突

所以你的代码变成了

<template>
  <div>
    <script
      src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
      crossorigin="anonymous"
      id="xxxxx"
    ></script>
  </div>
</template>
<style scoped>

>>> .fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
>>> .fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block;
}
>>> .fserv-field:nth-child(5){
   width: 140px;
   padding: 0;
  display: inline-block;
}
@media screen and (max-width: 360px) {
  >>> .fserv-field:nth-child(3) {
    width: 135px;
  }
  >>> .fserv-field:nth-child(5) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   >>> .fserv-field:nth-child(3),.fserv-field:nth-child(5) {
       width: 100%;
       padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * 
       https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
       display: block;
   }
}
</style>

>>>.fserv表格{
边界半径：10px；
填充：20px；
位置：相对位置；
字体系列：Arial，无衬线；
}
>>>.fserv字段：第n个子项（3）{
宽度：187px；
右侧填充：5px；
显示：内联块；
}
>>>.fserv字段：第n个子项（5）{
宽度：140px；
填充：0；
显示：内联块；
}
@媒体屏幕和屏幕（最大宽度：360px）{
>>>.fserv字段：第n个子项（3）{
宽度：135px；
}
>>>.fserv字段：第n个子项（5）{
宽度：110px；
}
}
@介质屏幕和（最大宽度：986px）和（最小宽度：525px）{
>>>.fserv字段：第n个子项（3），.fserv字段：第n个子项（5）{
宽度：100%；
填充：0 30px/*！*用于引导3*的日期时间选择器！版本：4.7.14*
https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
显示：块；
}
}

及

>>>.fserv表格{
边界半径：10px；
填充：20px；
位置：相对位置；
字体系列：Arial，无衬线；
}
>>>.fserv字段{
填充：40px！重要；
}
>>>.fserv字段：第n个子项（3）{
宽度：187px；
右侧填充：5px；
显示：内联块！重要；
}
>>>.fserv字段：第n个子项（4）{
宽度：140px；
填充：0；
显示：内联块！重要；
}
@媒体屏幕和屏幕（最大宽度：360px）{
>>>.fserv字段：第n个子项（3）{
宽度：135px；
}
>>>.fserv字段：第n个子项（4）{
宽度：110px；
}
}
@介质屏幕和（最大宽度：986px）和（最小宽度：525px）{
>>>.fserv字段：第n个子项（3），.fserv字段：第n个子项（4）{
宽度：100%；
填充：0 30px/*！*用于引导3*的日期时间选择器！版本：4.7.14*https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
显示：块；
}
}

太好了它可以工作，如果您也能指导我如何在使用

>>

操作符时忽略终端中记录的eslint问题，那就太好了。使用：：v-deep解决了这个问题。无论如何，对上述评论的建议也会对某人有所帮助。@mariappan.gameo很高兴它对你有所帮助。您可以发布ESLint错误日志吗？这看起来很奇怪，因为ESLint不应该真的尝试删除CSS。请看下面的屏幕截图（链接），这似乎不是ESLint。你能和我们分享一下你用什么工具来整理你的CSS吗？是

vscode stylelint

？

<template>
          <div>
            <script
              src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
              crossorigin="anonymous"
              id="xxxxx"
            ></script>
          </div>
        </template>
    <style scoped>

>>> .fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
>>> .fserv-field{
  padding: 40px !important;
}
>>> .fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block !important;
}
>>> .fserv-field:nth-child(4){
   width: 140px;
   padding: 0;
  display: inline-block !important;
}
@media screen and (max-width: 360px) {
  >>> .fserv-field:nth-child(3) {
    width: 135px;
  }
  >>> .fserv-field:nth-child(4) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   >>> .fserv-field:nth-child(3),.fserv-field:nth-child(4) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>