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文法の直しはいらないと思います。
少しでもご参考になったらと思います。
↧