AngularでSCSSをCSSに変換する方法

SCSSの方がもっと効率いいとは思いますが、プロジェクトによってはSCSSよりCSSを希望する場合もあるので、すでにSCSSで作ったプロジェクトを途中でCSSに変換した時やったことをまとめて置きます。

目標

進行中のAngularプロジェクトをSCSSからCSSに変換

ng g c compoment で新規コンポーネント追加時も、scssではなくcssにする

実施した環境：

Angular 12.0.0

実際やってみたら、別にバージョンは気にしなくていいかなと感じました。おそらく今後のバージョンでも通用するかと思います。

修正した箇所

src/angular.json

「scss」で検索し、全てを「css」に変更

src/style.scss

このファイルを src/style.css に変更

各コンポーネントで

*.component.scss ファイル名を *.component.css に変更

.component.ts でstyleUrls: ['./.component.scss'] のscssをcssに変更

以上でした。

エラーが発生した場合

SCSSをCSSに変えると、一部CSSにない文法がエラーになります。それを一々CSSフォーマットに変える必要があります。

検証方法

上記の修正で全部正しく変更できたのかを確認するには、

ng serve

でcss関連のエラーが出るか確認が必要になります。

そして

ng g c csstest

みたいなコマンドでコンポーネントを追加し、追加されたスタイルファイルがcss拡張子になっているか確認できればOKです。

逆にCSSからSCSSにするには

同じやり方でいけると思います、ただし、SCSSの文法はCSSを兼しているので、CSS文法の直しはいらないと思います。

少しでもご参考になったらと思います。