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

Question

我找不到文档中引用的内容，但 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 文件，你可能应该将你的组件分解为多个较小的组件。

Answer 2

原因是渲染内容有两种不同的路径：预编译和运行时编译。

当您使用 CLI 编译 SFC（单文件组件或.vue文件）时，编译器将根据需要生成适当的 css 文件。它还会将模板的内容转换为 JavaScript 代码，因此 HTML 模板代码被编译出来，并通过生成的 js 包来处理渲染。

另一方面，如果您依赖 vue 来运行时编译模板，则由于多种原因不支持 css 编译，例如需要额外的依赖项并且无法生成 css 文件，这会导致注入css 不明确。

如果您希望能够将 css 注入到页面中，则没有什么可以阻止您手动注入 css。您可以通过定义一个<template>（或其他标签）来保存样式，然后您可以让组件在每个选择器之前注入一个作用域 ID，然后将脚本注入到 html 中。它不是一个开箱即用的解决方案，可能需要一些工作才能可靠地处理所有选择器，但这是可能的。