Question

我用--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",

edit：然后，我创建了一个_variables.scss部分，并在component.scss中写了@import'〜sass / variables';在像@import'./variables'这样的styles.scss中导入它们之后；根据此链接中的指南：https://scotch.io/tutorials/using-sass-with-the-angular-cli 仍然无法正常工作。

Answer 1

实现此目标的最佳方法是创建一个变量文件，并将此文件导入到您的scss文件中。

像这样：

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

或

@import "~variables.scss";

在您的styles.scss中，您只需添加变量文件的引用即可！

Answer 2

如果在项目init上使用--style=sass选项是正确的，则可能是问题所在。如果打算使用.scss文件（我建议这样做），则应该使用--style=scss。

要立即解决此问题，可以运行命令ng set defaults.styleExt scss。

Answer 3

答案是简单地将完整路径添加到component.scss，就像这样， @import“ src / sass /〜variables.scss”;而不只是@import“〜variables.scss”;

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

3 个答案: