AngularとSass使いたい時どうすればいいんだ問題

(※Angular2以降の話です)

• 全体のレイアウトをRailsのapp/assets/stylesheetsで管理しつつ
• Angularコンポーネントに関するスタイルはstyleUrlsプロパティに指定したコンポーネント専用スタイルで定義して
• コンポーネント用スタイルの中でレイアウト用のsassで定義した変数を使いたい

みたいなとき、どうやればいいんだろう。というのを考えてる。

やりたいことのイメージ

// app/assets/stylesheets/variables.scss
$base_color: #723200;

// frontend/src/components/timeline.component.ts
@Component({
    selector: 'timeline',
    templateUrl: './timeline.component.html',
    styleUrls: ['../styles/timeline.component.scss']
})

// frontend/src/styles/timeline.component.scss
button {
  &:hover {
    background-color: $base_color;
  }
}