如何在 Angular 2 中添加导入 SCSS 文件答案

【问题标题】：How to add to import SCSS files in Angular 2如何在 Angular 2 中添加导入 SCSS 文件
【发布时间】：2016-10-12 16:51:23
【问题描述】：

我想问一下如何将我所有的 .scss 文件导入到一个 css 文件中。例如，我有全局 scss 文件，如 colors.scss、mixins.scss 和 helpers.scss。我想有一个 .scss 文件，我只是 @import 加载我所有的 .scss 文件。我正在使用 angular-cli 创建我的项目。

谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

1 您在src 目录下创建一个全局styles.scss 文件。

2 接下来将该文件添加到angular-cli.json 样式数组：

 "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": "assets",
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "app",
            "mobile": false,
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "environments": {
                "source": "environments/environment.ts",
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],

3 导入styles.scss中的所有 .scss 文件

@import 'styles/colors.scss';

【讨论】：

我试过了，但它无法识别我的示例，比如我在 component.scss 文件中的颜色变量
您是否在同一文件中导入了colors.scss 之前的component.scss？
我对component.scss的意思是当你使用（ng generate component）生成组件时的scss，例如标题组件
在这种情况下，您需要在每个组件 .scss 中导入 colors.scss，您可以在其中引用来自 colors.scss 的变量。
那么你将不得不在所有 5 个组件中导入 colors.scss，angular-cli 团队意识到了这个问题。也许将来会有升级，但现在就是这样。