找不到在 :root 选择器上声明的 Nuxt CSS 属性

Question

我有一个 Nuxt 2 应用程序，我想创建一个带有 <style> 标签的组件，如下所示，使用 CSS 属性进行样式设置。

目标是在组件中定义一个可以从外部覆盖的默认值 CSS 属性。

但是，当我尝试这种方法时，默认值似乎根本不起作用。

<style lang="scss" scoped>
:root {
  --default-badge-color: linear-gradient(90deg, #1717ff 0%, #bc29e0 92%);
  --default-badge-text-color: #fff;
  --default-badge-font-size: 1.6rem;
  --default-badge-padding: 0.6rem 1rem;
  --default-badge-border-radius: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding, var(--default-badge-padding));
  border-radius: var(--badge-border-radius, var(--default-badge-border-radius));
  background: var(--badge-color, var(--default-badge-color));
  color: var(--badge-text-color, var(--default-badge-text-color));
  font-size: var(--badge-font-size, var(--default-badge-font-size));
  text-align: center;
}
</style>

我的语法方法有误吗？

编辑： 我更正为 padding: var(--badge-padding, var(--default-badge-padding))。但是 CSS 属性仍然找不到，除非我在 .badge.

中定义它们

Answer 1

范围 :root 没有任何意义，它旨在 select 文档的 根目录 比 html select 或者。这就像为 <body>.

定义样式范围

也许您希望 :root 是一个 selector 用于当前组件的根元素（例如 :host 用于 Shadow DOM），但没有这样的pseudo-class 在 Vue 中。另一种方法是将您自己的 class 应用于组件的根元素，并将其用作 select 或：

<template>      
  <div class="my-root">
    <div>...</div>
    <div class="badge">...</div>
  </div>
</template>

<style scoped>
   
.my-root {
   /* CSS custom properties */
}

.badge {
  /* styles using the CSS custom properties above */
}
</style>

另一方面，如果您真的想从 <style scoped> 中向文档根目录添加 CSS 自定义属性，您可以使用 :global() pseudo-class :root 上的功能：

<style scoped>
:global(:root) {
  /* CSS custom properties */
}

.badge {
  /* styles using the CSS custom properties above */
}
</style>

demo 1

或单独的 global <style> block 仅用于 :root:

<style>
:root {
  /* CSS custom properties */
}
</style>

<style scoped>
.badge {
  /* styles using the CSS custom properties above */
}
</style>

demo 2

找不到在 :root 选择器上声明的 Nuxt CSS 属性

Nuxt CSS properties declared on :root selector are not found

css

vue.js

vuejs2

nuxt.js