Angular 2 - 到处都是重复的 <style> 块

Posted 2023-03-06

【中文标题】Angular 2 - 到处都是重复的 <style> 块

【英文标题】：Angular 2 - Duplicated <style> blocks everywhere

【发布时间】：2017-11-09 02:15:39

【问题描述】：

我正在使用最新的 Angular(4) 和 Angular CLI。我遵循了关于 SO 的建议来设置组件可用的全局 scss。

Angular-CLI global scss vairables

我的结构是这样的

/
 styles.scss
 /styles
  variables.scss
  mixins.scss
  common.scss
 /app
  /component1
   component1.scss
  /component2
   component2.scss

主要的styles.scss文件有如下代码

@import './styles/variables.scss';
@import './styles/mixins.scss';
@import './styles/common.scss';

在我的组件中，我以

的语句开始每个组件的 scss 文件

@import '~styles.scss';

我认为这是将全局变量/mixins/common 引入组件的 scss 的正确方法。然而，当我开始在组件中包含组件时，我开始注意到 Webpack 实际上是在页面中为每个组件创建一个块，并且每个组件都将所有全局 scss 都写在其中。因此，组件 1 将有一个块，顶部有所有变量、mixins、常见的东西，然后在页面中的另一个组件 2 的正下方有另一个块，再次包含所有这些信息。

除了效率极低之外，这意味着全局样式在每次加载时都会覆盖自己（可以在 chrome 调试中看到）一次。

非常感谢一些方向。

【问题讨论】：

您可以禁用viewEncapsulation 以使用全局样式

究竟是什么意思？我不必在我的组件样式中 @import 主要的 styles.scss 吗？我已经尝试过了，但 webpack 无法编译，因为它说它不知道组件 scss 文件中的某些 scss 变量是什么。

刚刚发现这似乎是一个已经在讨论的问题。 github.com/angular/angular-cli/issues/1261 但如果有人有聪明的解决方案，那将不胜感激。

如果您阅读了最后一条评论，您可以找到答案。

【参考方案1】：

这是基本的 sass 行为，你不应该多次导入导致 css 的东西（导入到组件中的 sass 文件通常应该只包含变量、mixin 和函数）。如果您只需要导入一次，请将其添加到默认样式文件中。 Look here

【参考方案2】：

<style> 标签是正常的角度行为。每个组件 SCSS 都被写入一个 <style> 元素，所以这没有什么问题。 style.scss 用于不需要封装的全局样式。如果您在 angular.json 中导入它，它也会被写入 <style> 元素：

"styles": [
    "styles.css"
],

您遇到的错误是您链接的question（仍然不被接受）。 您不应该将已经导入的 styles.scss（除了变量或 mixins）导入到组件中，因为这会导致包大小增加，因为您一遍又一遍地导入代码（这也是 GitHub issue 的原因你提到的）。

您可以使用 mixins、变量和 common.scss，只需将它们直接包含在您的组件 SCSS 中，就像您需要它们一样。