Nuxt ver.2 へプロジェクトを移行したときにCSSで対応したこと（PostCSS編） #postcss

前提条件

Nuxtのver.1を使って個人的なプロジェクトを作っていました。SSRは使わずSPAモードでGenerateして、静的ファイル一式をサーバーにアップする形です。
しばらくプロジェクトを進めて、一旦区切りが出来たので、使っているモジュール（node_modules）を全てアップデートしました。その中でも、すんなりとは行かなかったNuxtのアップデートについて書きたいと思います。

アップデートしたバージョン：1.4.1から2.2.0へ

アップデートしたら起きたこと

私はNuxtでスタイリングするときに、NuxtのデフォルトであるPostCSSとcssnextの組み合わせで書いていました。ですので、nuxt.config.jsにはCSS周りの設定は入れていません。
各コンポーネントのスタイリングは、下記のようにvueファイルに書いていました。

sample.vue

<template>
  <h1>
    タイトル<span class="sub-title">（サブタイトル）</span>
  </h1>
</template>
<script>
  //スクリプト
</script>
<style scoped>
h1 {
  color: #000;
  & .sub-title {
    font-size: .9em;
    color: #444;
  }
}
</style>

この状態でNuxtをアップデートしたところ、cssnextのネスト（入れ子）が機能しませんでした。cssは書き出されますが、&は残ったまま書き出されてしまいます。

原因と対応

原因

調べてみたところNuxt2からはcssnextではなく、postcss-reset-envというのに変わっているからでした。
参照：feat: use postcss-preset-env instead of postcss-cssnext (#3291) · nuxt/nuxt.js@8acef8d · GitHub

対応

結果から言うとpostcss.config.jsもしくは.postcssrc.jsというPostCSSの設定ファイルに、postcss-preset-envの設定を書けば大丈夫でした。
私が書いた内容は下記になります。

postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0,
      importFrom: 'assets/css/_variables.css'
    }
  }
}

ステージはトランスパイル時のレベルです。stageが高いほど新しいブラウザ向けになるようです。デフォルトが2に設定されており、2だとnestingが解決されません。nesting rulesはstate:0です。
参照：
nesting rules
postcss-preset-env

その他

importFrom

postcss-preset-envのimportFromは共通で使う変数とかを読み込んでおくことができます。便利！
ver.1の時は、変数を書いたcssファイルを各コンポーネントで@importして読み込んでいました。
（ver.1でも何かのやり方で出来たのかもですが、今回知ることが出来て嬉しかったです）

~/assetsと~assets

また、地味ですが、css内では~/assetsを~assetsに変更する必要があります。それだけですが、地味に手間です。
アセット - Nuxt.js

CSSですこし躓きましたが、それ以外は特に引っかからずにver.2へ移行出来ました。