Angular14でビルド時、cssファイルで`Error: Module parse failed: Unexpected token (1:0)`とエラーが発生する

Angular13→14にバージョンアップ後に下記のエラーが発生したので、備忘録として残します。

エラーメッセージ

./node_modules/codemirror/addon/hint/show-hint.css:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .CodeMirror-hints {
|   position: absolute;
|   z-index: 10;

エラー発生箇所

require("codemirror/addon/hint/show-hint.css");

原因

• v14.0.0のリリースノートに下記の記載がありました。

We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI.

This feature was never truly supported by the Angular CLI, but has as such for visibility.

ECMAモジュールとしてCSSファイルをインポートすることは、Webpackの標準機能ではなく、Angular CLIではサポートされていないため、ビルドタイムエラーを発行するようになりました。

この機能は、Angular CLIで本当にサポートされていたわけではありませんが、可視化のためにそのように表示されています。

修正方法

• angular.json 内のstylesに追加します。

angular.json

{
  "projects": {
    "web-project": {
      ...(省略)
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...(省略)
            "styles": [
            "src/styles.scss",
            "node_modules/codemirror/addon/hint/show-hint.css" // ここに追加
          ],
          ...(省略)
        }
      }
    }
  }
}

参考

• https://github.com/angular/angular-cli/issues/23273
• https://github.com/angular/angular-cli/releases/tag/14.0.0