SSIA

私がパワプロ2020で遊んでる間にcss-loaderのv4.0.0がリリースされました。
そうとは知らずいつも通り1からプロジェクトを組んだ結果、vueコンポーネントに書いたsytleがあたらないという現象にぶち当たりました

どうして…(ここで猫になる)

SSIAは「タイトルで言うこと全部言ってますよ」という意味です

ではここでcss-loaderのv4.0.0のリリースノートを見てみましょう

minimum required Node.js version is 10.13.0

minimum required webpack version is 4.27.0

the esModule option is true by default

default value of the sourceMap option depends on the devtool option

......

はい

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

ここが原因です
切りましょう

これに気づくのに一晩かかりました

webpack.config.js

{
  // 前略
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          hotReload: true,
        },
      },
      {
        test: /\.css$/i,
        use: [
          "vue-style-loader",
          {
            loader: "css-loader",
            // ココ
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
  // 後略
}

参考

あったらこんなに苦労しなかったのに…強いて言うなら公式です
リリースから日が浅いか自力でwebpack書いてる人が少ないからか騒いでる人は見当たりませんでした

未解決事項

これはvueを使う場合に限った問題だろうか？
css-loaderのesModuleを切らずにvueや/^vue(-style)?-loader$/側をesModuleに対応させることで解決できないだろうか？
- loaderの読み込み順からして対応させるならvue-style-loaderと推察されるがこちらにはesModuleスタイルに切り替えるオプションは見当たりませんでした
- vue-loaderはv14時点で強制的にesModuleスタイルになっています