Angularで「Warning: ▲ [WARNING] Expected identifier but found “*” [css-syntax-error]」
今回はAngularでng sでサーバーを起動した際に下記のウォーニングが出るときの対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:953:15: 953 │ .pika-single { *zoom: 1 } ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:972:4: 972 │ *display: inline; ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:1012:4: 1012 │ *position: absolute; ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:1013:4: 1013 │ *top: 0; ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:1023:4: 1023 │ *left: 0; ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:1029:4: 1029 │ *right: 0; ╵ ^ Warning: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] styles.css:1038:4: 1038 │ *display: inline; ╵ ^ |
Angularのバージョンは14.2.12で、Node.jsのバージョンは14.21.3です。
Dockerを使った仮想環境上で動かしております。
Angularで「Warning: ▲ [WARNING] Expected identifier but found “*" [css-syntax-error]」
結論から言うとangular.jsonのconfigurationsの対象の環境に下記のoptimization: falseを追加するとwarningが出なくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "projects": { "test": { "architect": { "configurations": { "local": { "optimization": false } } } } } } |
optimizationという項目は、ビルドプロセス中に最適化を適用するかどうかを制御する項目だそうです。
optimizationをfalseに設定すると、最適化（ミニフィケーションやツリーシェーキングなど）が無効になり、ビルドプロセスは速くなりますが、出力ファイルは大きくなります。
この設定でも良いという方はoptimizationをfalseにすることでひとまずwarningが出なくなるでしょう。
終わりに
今回はAngularでng sでサーバーを起動した際に冒頭のウォーニングが出るときの対処法についてご紹介いたしました。