Nuxt で Dart Sass を使う

インストール

nuxt-create-app とかで作ったものなど、既存の Nuxt プロジェクトに sass をインストールします。fibers というパッケージも合わせてインストールします。

yarn add --dev sass fibers

fibers はコンパイルの高速化のために必要とのこと。

To avoid this performance hit, render() can use the fibers package to call asynchronous importers from the synchronous code path.

• Sass: Dart Sass

Nuxt.config.js への設定

Nuxt.config.js で webpack の loader 設定を記述します。

import Fiber from 'fibers'
import Sass from 'sass'

const sass = {
  implementation: Sass,
  sassOptions: {
    fiber: Fiber,
  },
}

module.exports = {
  build: {
    loaders: {
      scss,
    },
  }
}

Nuxt では以上の設定で Dart Sass を利用できます。

deep セレクタ対応

ただし、Vue の独自セレクタである /deep/ と >>> が使えなくなりました。v-html ディレクティブで動的にやってきた DOM に、 scoped 配下のスタイルを与えたいときに使うセレクタです。

これには ::v-deep のみが利用できるので、/deep/ か >>> を使っている場合は書き換えていく必要があります。

また、::v-deep は stylelint を使っている場合、エラー対象になることもあるので、次のように .stylelintrc.js でエスケープしておくとよいです。

module.exports = {
  rules: {
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ]
  },
}