【Angular v6】作成中のプロジェクトのスタイル管理をscssに変更したい場合

現在、自サイトをAngularで作成中。

AngularはAngular CLIがいろいろやってくれて便利なので、
ほぼすべてお任せ状態なのですが、
作った後のプロジェクトの設定を変えようとすると途端に戸惑ってしまうわけです。
(下手に直すと壊れて動かなくなったり…。)

まぁ、ちゃんと裏でどう動くか見ておこうねって話なのですが、サボり癖のついた私はそのあたり手を抜いて後でひどい目に遭うわけですw

 

と、前置きはここまでにして、今回はスタイルシートcssで作成したAngularプロジェクトをscssに置き換える方法。

 

一番いいのは、「今の時代、cssを生で触るなんてしないよね!!」と考えて、プロジェクトを作るときにオプション設定で対応すべきなのですが、
私みたいに「よっしゃ!!やるで!!」と飛び込みで始めちゃう人もいるわけです。
そしてあとで「cssだと読みづらい…あっ...バグった」となるわけですね。

 

今回は、「もうプロジェクト開始しちゃったけど、あとでscssに変えたくなった…」という人向けです。

 

ということで手順。

※ちなみに私の環境はv6です。web-animations読み込まなくてもよくなってるのでいいですね(^^)/

 

(1)angular.jsonを開き、以下の箇所を書き換える。

・「projects/<プロジェクト名>/architect/build/options/styles」プロパティ

書き換え内容:「src/styles.css」⇒「src/styles.scss」

・「projects/<プロジェクト名>/architect/test/options/styles」プロパティ

書き換え内容:「src/styles.css」⇒「src/styles.scss」

・「schematics/@schematics/angular:component/architect/styleext」プロパティ

書き換え内容:「css」⇒「scss」

 

(2)src/styles.cssファイルの拡張子を「scss」に変更

 

(3)あとは自分が作成したプロジェクト内のcssファイルの拡張子をscssに書き換える。
(このファイル名を定義しているところは漏れなく直してください。特にAngular CLIの「ng componet」で作成している場合、comonent.tsファイルでstyleUrlsをファイル名で指定しているはずなので、そこも漏れないように。)

 

 

ここまで。私の場合は(1)~(3)を対応することでscssで書けるようになりました。

簡単ですね。

 

以上です。

 

2018/5/20 賢帝俊来