使用SCSS变量

Question

我目前正在使用angular-cli开发Angular 4应用程序，我遇到了一个小问题。我正在尝试创建一个可以动态加载样式的组件。

我有一个组件ComponentX，它应该使用SCSS变量color。但是color的值应该取决于通过angular-cli定义的应用程序加载的不同SCSS。

我试图找到一个好的解决方案但是我无法做到这一点。我尝试使用简单的导入，但没有成功。

我希望你能把我送到正确的方向：）

Answer 1

您可以将_variables.scss放在src/文件夹中，并将这些行添加到.angular-cli.json

"stylePreprocessorOptions": {
  "includePaths": [
    "."
  ]
}

然后在component.scss文件中使用@import 'variables';。

它不会比这更容易，因为通过设计，每个component.scss文件都在自己的范围内编译，以保持组件分离。