Angular 6 style.scss 未全局应用于组件答案

【问题标题】：Angular 6 style.scss not globally applied into the componentsAngular 6 style.scss 未全局应用于组件
【发布时间】：2019-03-02 14:26:22
【问题描述】：

我使用 --style=sass 创建了一个新的 cli 项目，然后在 src/sass/styles.scss 中定义了一些变量（没有创建部分变量），所以它们应该是全局定义的，对吗？，所以当我尝试在 home.component.scss 中使用它们时，我收到了这个错误https://imgur.com/a/IckJL14

然后我添加了一个黑色边框，以确保正常的 css 正常工作并且确实有效，问题出在 sass 上，这是 angular.json

 "styles": [
          "src/sass/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/malihu-custom-scrollbar- 
           plugin/jquery.mCustomScrollbar.css",
          "./node_modules/animate.css/animate.min.css",

编辑：然后我创建了一个部分 _variables.scss 并在 component.scss 我写了 @import '~sass/variables';在将它们导入到 styles.scss 中之后，就像 @import './variables';根据此链接的指南：https://scotch.io/tutorials/using-sass-with-the-angular-cli 还是不行。

【问题讨论】：

标签： sass angular6 angular-cli-v6

【解决方案1】：

实现这一点的最佳方法是创建一个变量文件并将该文件导入您的 scss 文件中。

像这样：

@import "../../variables.scss";

或

@import "~variables.scss";

在你的styles.scss 中，你只需要引用你的变量文件！

【讨论】：

【解决方案2】：

如果您在项目初始化中使用了--style=sass 选项是正确的，那么这可能就是问题所在。如果您打算使用 .scss 文件（我会推荐），那么您应该使用 --style=scss。

现在要解决这个问题，您可以运行命令ng set defaults.styleExt scss。

【讨论】：

【解决方案3】：

答案是像这样简单地将完整路径添加到 component.scss， @import "src/sass/~variables.scss";而不仅仅是@import "~variables.scss";

【讨论】：