[vue]css-loaderを4.*にしたらesModule optionを切ろう

4454 ワード
Vue.js css-loader webpack Vue.js テキストリンク

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スタイルになっています