Nuxt.jsのstyleブロックでlang="postcss"を有効にするとvscodeで適切にシンタックスハイライトされる

Nuxt 2(1でも？未確認)では yarn add postcss-loader すると何も設定しなくても style ブロックでpostcssを使うことができます。しかしながら、vscodeでVueのシンタックスハイライトをしてくれるVeturはそこまで考慮してシンタックスハイライトしてくれないのでpostcssのコードにエラーが出てしまいます。もちろん、nuxtは適切にコードを解釈できるのでvscode上のエラーさえ気にしなければ開発はできます。

(↓nuxtはエラーを出さないがvscode上ではエラーが表示される例)

逆にstyleブロックにlang="postcss"と指定してしまうとvscode上では適切な表示を得ることができますが、nuxtがwebpackに登録したローダーでは検知できなくなってしまうのでnuxtがエラーを吐きます。

そこで一つの解決策としてlang="postcss"と指定したときに使用されるローダーを追加してしまうという手が考えられます。以下のようにnuxt.conifg.jsを編集することでlang="css"と指定したときと同じ出力結果をlang="postcss"でも得ることができます。

nuxt.config.js

module.exports = {
...
  build: {
    extend(config, ctx) {
      for (let rule of config.module.rules) {
        if (rule.test.test('.css')) {
          config.module.rules.push({
            test: /\.postcss/,
            oneOf: rule.oneOf
          });
        }
      }

      return config;
    }
  },
}

この手法は一時しのぎにすぎず、本来であればVeturとnuxtが連携してcssに適用されるローダーを検知するようになっているべきです。ですので そう遠くないうちに こんなことをしなくてもよくなるかもしれません。