Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

前提条件

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へ移行出来ました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした