angular2 中使用sass, 需要定义一些全局的样式变量。我在styles.sass里面定义了变量。内部无法编译

Question

angular2 中使用sass, 需要定义一些全局的样式变量。我在styles.sass里面定义了变量。component.sass里面无法识别这个变量。
style.sass

$mainColor: rgba(0,170,255,1)

app.component.sass

.header
    width: 100%
    height: 80px
    color: $mainColor

无效，有什么办法可以让内部识别嘛！！！

Answer 1

当然没办法识别，这是因为组件内的 .scss 和 ./src/styles.scss 是独立编译的。

我比较建议是组织这样的结构：

src
    styles.scss
    styles
        variables.scss
        header.scss

src/styles.scss 自然是引用 styles 目录下所有的文件：

@import "styles/variables";
@import "styles/header";

而对于组件而言就不必再对样式进行定义。

其实这是 Angular-Cli 决定的因素，但是合理的，因为对于组件而言是内聚性的，怎么可以因为外界的变量改变其外衣呢。

一个更好的脚手架可以参考ng-alain的设计以及说点Angular Cli打包的事中的描述。

Answer 2

有没有在angular的配置json中将sass加入style？