SassのDeprecationを解消したらCloudflare Pagesへのデプロイができなくなった
taka_hSvelteKitで作成したプロジェクトのSassのバージョンを上げたところ、Deprecation [legacy-js-api]なる警告がでてきた。
Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
Viteが今後廃止予定のsassのapiを使っていることが原因で出る警告らしい。vite.config.tsのcss.preprocessorOptionsの設定をすることで解消できるようなので、vite.config.tsを以下のように修正する。
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
}
});
無事警告が表示されなくなったので修正コミットをプッシュした
…のだが、デプロイ先のCloudflare Pages（フリープラン）のデプロイが待てど暮らせど完了しない。
~~~~~~
19:43:37.478 .svelte-kit/output/server/index.js 91.67 kB
19:43:37.478 ✓ built in 23.96s
19:43:37.478
19:43:37.478 Run npm run preview to preview your production build locally.
19:43:37.478
19:43:37.479 > Using @sveltejs/adapter-cloudflare
19:43:37.640 ✔ done
ビルドはほぼ完了しているっぽいのだが、ここでずっと止まってしまう。
最終的にはこのままデプロイ時間がタイムアウトしてしまい、以下のようなエラーが出てデプロイが失敗する。
20:18:13.347 Failed: build exceeded the time limit and was terminated. Refer to https://developers.cloudflare.com/pages/platform/limits/#builds for build limits
ローカル環境ではなんのエラーも起こらず普通にビルドしてプレビューできるし、Cloudflare Pagesでもビルドそのものに関してはエラーは起きていないように思える。ただビルドしたアプリケーションがCloudflare Pagesの本番環境にデプロイされず、そのままタイムアウトしてしまっているようだ。
css.preprocessorOptionsを修正する前のコミットでデプロイし直すと普通に成功する。ので十中八九追加したscss: { api: 'modern-compiler' }の設定が原因であると考えられる。
このscssの'modern-compiler'の設定にCloudflare Pagesがまだ対応していないのかもしれない。
taka_h最終的にアプリケーション内のscssを全てcssに書き換えることで解決した。
ネスト記法はそもそも使っていなかったし、書き換えが必要な箇所もレスポンシブやリンク&ボタンのhover、focusのスタイルを制御する@mixinぐらいだったので、さほど大変ではなかった。
cssに書き換えてコミットするとものの1分足らずでデプロイが完了した。
taka_hなんか調べてみると、Astroでも新しいsassのapiを使っているとCloudflareへのデプロイが失敗する事例がちょくちょく報告されている。
「ローカルでは普通に動くが、Cloudflareへのデプロイが失敗する。」「scssをcssに書き直すと解消される」って点はいずれも共通。
「netlifyやvercelでは同様の問題は起こらない」と言われているので、やっぱり原因はCloudflare側にあるっぽい。