Question

我正在使用最新的Angular（4）和Angular CLI。我按照SO上的建议来设置组件可用的全局scss。

＆＃xA;＆＃xA;

我的结构如下所示

  /＆＃xA; styles.scss＆＃XA; /样式＆＃XA; variables.scss＆＃XA; mixins.scss＆＃XA; common.scss＆＃XA; /应用＆＃XA; / COMPONENT1＆＃XA; component1.scss＆＃XA; / COMPONENT2＆＃XA; component2.scss＆＃xA;

＆＃xA;＆＃xA;

主要的styles.scss文件包含以下代码

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

在我的组件中，我使用

＆＃xA;＆＃xA;

的语句启动每个组件scss文件 @import'~styles.scss';＆＃xA;

＆＃xA;＆＃xA;

我认为这是引入全局变量/ mixins /的正确方法常见于我的组件的scss。但是，当我开始在组件中使用组件时，我开始注意到Webpack实际上在页面中为每个组件创建了一个块，并且每个组件都在其中写出了所有全局scss。因此，component1将有一个块，其中包含顶部的所有变量，mixins，常见内容，然后是页面中另一个component2的另一个块，再次包含所有信息。

＆ #xA;＆＃xA;

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

＆＃xA;＆＃xA;

某些方向会非常非常感谢。

＆＃xA;

Answer 1

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

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

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

您可以简单地通过将mixins，变量和common.scss包含在组件SCSS中来使用它们，就像您需要它们一样。

Answer 2

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

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

2 个答案: