webmanab.html

menu

Dart Sass を Nuxt に導入する -『Sass』

　

Dart Sass がとても便利なのを知り、最近導入しました。Ruby Sass / Node Sass と使ってきましたが、Ruby Sass は開発環境に Ruby ないとだめだし、Node Sass はローカルの Node のバージョンに依存するからキャッシュクリアしないといけなかったりが面倒だったので、その辺りも解消できてる Dart Sass がいいかんじです。

リリースされたのは随分前ですが。ちょっと機会がなかったので。

Nuxt での導入方法です。

インストール

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.

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 を利用できます。記述は基本いつもどうりで大丈夫です。


<style lang=“scss” scoped>
.el {
  color: $black;
}
</style>

deep セレクタ対応

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

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

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


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

おわります。

Dart Sass を Nuxt に導入する -『Sass』

share
ー

tag
ー

related
ー

tip