javascript - 为什么样式标签在 Vue 模板中不允许，但在 .vue 文件中允许？

Question

我找不到在 the documentation 中引用它, 但 Vue 似乎自动去掉了 <style>模板中的标签。例如，如果您的组件位于 .js 中像...这样的文件

export default {
   template: (
      `<section>
         <style scoped>
            header { color: blue; }
         </style>
         <header>Hello!</header>
         ...
      </section>`
   ),
   // data, methods, etc.
};

...那么您的页眉就不会是蓝色的；样式将随着警告消失 "Tags with side effect (<script> and <style>) are ignored in client component templates."

然而，如果您使用的是 .vue文件和 vue cli，通常鼓励您使用三个部分 - <style scoped>对于你的 CSS，<script>对于你的 JavaScript，和 <template>用于您的 HTML 模板。

除非有其他(未记录？)方法通过组件的配置参数设置样式，否则有两种不同的范例 - 一种用于 js 中的组件，一种用于 vue 组件。为什么是这样？非 vue-cli 用户是否有另一种方法可以将组件范围的样式添加到他们的 vue 应用程序中？

Answer 1

现在给你一个解决方案可能为时已晚，但我认为对于其他可能遇到同样问题的人来说还为时不晚。

你可以通过使用 Vue 的标签来解决这个问题，像这样:

<component is="style" scoped>
    .pager.inactive {
        display: none;
    }
</component>

它至少对标签有效。可能有问题。另外，我不知道加载外部CSS文件是否可行。就我个人而言，我会避免这样做，因为如果您的组件变得太大以至于您需要一个单独的 CSS 文件，您可能应该将您的组件分解成多个较小的组件。