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

Question

我正在使用最新的 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 实际上是在页面中为每个组件创建一个 block ，并且每个组件都在其中写入了所有全局 scss。因此，component1 将有一个 block ，所有变量、mixins、公共(public)内容都在顶部，然后在该 block 正下方的另一个 block 用于页面中的另一个 component2，再次包含所有这些信息。

除了这非常低效之外，这意味着全局样式每次加载时都会 self 覆盖(可以在 chrome 调试中看到)一次。

一些方向将不胜感激。

Answer 1

<style>标签是正常的 Angular 行为。每个组件 SCSS 都被写入 <style>元素，所以这没有错。style.scss 用于不需要封装的全局样式。它还被写入 <style>元素，如果你将它导入到你的 angular.json 中:

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

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

您只需在需要时直接将它们包含在您的组件 SCSS 中，即可使用 mixin、变量和 common.scss。