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

【问题标题】：Why are style tags not allowed in a Vue template, but are allowed in a .vue file?为什么 Vue 模板中不允许样式标签，但在 .vue 文件中允许？
【发布时间】：2021-01-27 03:47:31
【问题描述】：

我在 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 应用程序中？

【问题讨论】：

可能是安全问题。两者都需要注射。
在模板字符串中这样做需要模板编译器比现在复杂得多。 非 vue-cli 用户是否有另一种方法可以将组件范围的样式添加到他们的 vue 应用程序中？ - 请参阅 stackoverflow.com/questions/42765262/…。
另一种方法是将作用域委托给 CSS 模块加载器并使用生成的类名作为:className="importedClassName"，请参阅webpack.js.org/loaders/css-loader/#scope。这就是 React 通常的做法，medium.com/@0n3z3r0n3/…

标签： javascript css vue.js vuejs3

【解决方案1】：

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

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

另一方面，如果你依赖 vue 来运行时编译你的模板，那么由于几个原因不支持 css 的编译，例如需要额外的依赖项并且无法生成 css 文件，这会使注入 css 变得模棱两可。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：