为啥范围样式没有加载到 nuxt 页面中？

Posted 2023-02-22

【中文标题】为啥范围样式没有加载到 nuxt 页面中？

【英文标题】：Why does the scoped styles are not being loaded in nuxt page?为什么范围样式没有加载到 nuxt 页面中？

【发布时间】：2020-09-08 09:38:08

【问题描述】：

我在 nuxt 网站中有两个作为单独组件的新销售表单（比如 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>

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

我正在尝试在两个不同的页面中使用这些组件。但问题是，如果我将样式设置为范围，则不会应用范围样式。如果我删除了范围，我会同时获得联系表单样式应用的页面。

任何适当的方法来做到这一点。我希望为每个表单单独应用样式（就像我使用 css 选择器 .fserv-field:nth-child(4) 选择这样的字段）。

或者有没有更好的方法来选择表单字段而不会发生冲突。字段顺序类似于 3,4（在 contactForm 中）而 3,5。 （在注册表中）

谢谢！

【参考方案1】：

您应该使用 Vue 提供的 >>> 运算符。它将允许您在使用scoped 时设置任何子组件的样式，并且不会产生任何冲突。 Documentation link.

所以你的代码变成了

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

和

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

【讨论】：

很好用，如果您还可以指导我如何在使用 >>> 运算符时忽略终端中记录的 eslint 问题，那就太好了。

使用 ::v-deep 解决了这个问题。无论如何，对上述评论的建议也会对某人有所帮助。

@mariappan.gameo 很高兴它帮助了你。你能发布 ESLint 错误日志吗？这看起来很奇怪，因为 ESLint 不应该真正尝试 lint CSS。

请看下面的截图（链接）ibb.co/j8z5b8T

这似乎不是 ESLint。你能和我们分享一下你用什么工具来 lint 你的 CSS 吗？是vscode-stylelint吗？