ViteのcustomLoggerで特定のWarningを抑制する方法と、Scssコンパイル時のWarningを抑制する方法

2024/10/30（水）

この記事は2025/09/04（木）にメンテナンスが行われています。

Vite本体のWarningを抑制する方法

Viteにて特定のWarningを抑制するには、customLoggerを利用します。
例えば特定のwarnOnceなWarningを抑制する場合は、以下のようにすることで実現できます。

import { createLogger, defineConfig } from 'vite'

// VITE_Logger
const VITE_Logger = createLogger()

// 特定のWarningを抑制するリスト
const muteWarnOnceList = [
  'hogehogehoge',
  'fugafugafuga',
  'piyopiyopiyo'
]
VITE_Logger.warnOnce = (msg, options) => {
  if (muteWarnOnceList.some((mute) => msg.includes(mute))) return
  return VITE_Logger.warnOnce(msg, options)
}

export default defineConfig({
  customLogger: VITE_Logger
})

同じ要領でwarnやerrorも同様に抑制することが可能です。ちなみにViteのログの種類は以下の通りです。

info
warn
wranOnce
error

参考: Vite customLogger

私はビルド時だけリソースのPATH解決が出来ない（しなくても良い）時に出るWarningを抑制するために活用していますが、他にも旧APIをどうしても使わないといけない時などでWarningが鬱陶しい場合に適度に活用し抑制していくと良いかもしれません。

Scssコンパイル時のWarningを抑制する方法

同様にScssコンパイル時のWarningを抑制するには、css.preprocessorOptions.scss.loggerにカスタムロガーを設定することで実現できます。

import { createLogger, defineConfig } from 'vite'

// 特定のWarningを抑制するリスト
const muteScssWarningList = [
  'mixed-decls',
  'legacy-js-api'
]
const SCSS_Logger = {
  warn(message: any, options: any) {
    // Mute warning for muteScssWarningList
    if (options.deprecation && muteScssWarningList.some((mute) => message.includes(mute))) return
  }
}

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        logger: SCSS_Logger
      }
    }
  }
})

過度に抑制するべきではありませんが、適度に・節度を持って抑制さえすれば開発体験を向上させることができるかもしれません。