Sass を Nuxt.js で使ってみよう（2019.07版）

以前、同様の記事 を書いたのですが、必要のないパッケージをインストールしているなど微妙な感じになっていたので書き直しました。

Sass is 何？

公式によると

CSS with superpowers

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

な CSS 拡張言語です！

ちなみに Sass は Syntactically Awesome StyleSheets の略らしく、翻訳すると

構造的にイケてるスタイルシート

だそうです！

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

このように ruby ライクな記述ができ、プログラミング言語っぽく書けることで保守性や可読性が高まるという優れものです！

（もちろん CSS に慣れ親しんだ人向けに、既存の CSS がそのまま使える記法も用意されていますよ！）

Sass 公式

Sass をインストール

前回は色々と試行錯誤しましたが、この 3 つをインストールすれば利用できます。

> npm install -D node-sass sass-loader @nuxtjs/style-resources

※ Vuetify を利用する場合は最新バージョンだとエラーになるので sass-loader@7.1.0 くらいに落とすとよいです

記法について

SASS 記法

冒頭に書いたとおり、Sass を利用した場合

<style lang="sass">
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
</style>

のように書けます。

SCSS 記法

既存の CSS をそのまま使いたい、とか、 CSS の記法に抵抗がない人の場合は SCSS記法 というものもあります。

こちらを使えば、いつもの CSS をそのまま利用することが出来ます！

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

コンパイル結果

上記どちらの記法を利用しても、 次のような CSS にコンパイルされます。

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

便利ですね！

グローバルな CSS （ SCSS ）の設定

Bulma をはじめとしたUIフレームワークを導入している場合、それらが提供しているスタイルをグローバルに利用したいケースがあります。

そういうときの設定方法です。

（ Bulma をサンプルにしています）

グローバルなCSS

~/assets/main.scss

// Bulma の Elements をインポート
@import "~bulma/sass/elements/box";
@import "~bulma/sass/elements/button";
@import "~bulma/sass/elements/container";
@import "~bulma/sass/elements/content";
@import "~bulma/sass/elements/form";
@import "~bulma/sass/elements/icon";
@import "~bulma/sass/elements/image";
@import "~bulma/sass/elements/notification";
@import "~bulma/sass/elements/progress";
@import "~bulma/sass/elements/table";
@import "~bulma/sass/elements/tag";
@import "~bulma/sass/elements/title";
@import "~bulma/sass/elements/other";

このようにフレームワークの利用したいスタイルをインポートしたファイルを用意します。

あとは、 nuxt.config.js で設定するだけ。

nuxt.config.js

module.exports = {
  
  // 省略
    
  /*
  ** Global CSS
  */
  css: [
    '~/assets/main.scss'
  ],
  
  // 省略
}

Mixin や変数などをコンポーネントとして利用する

章立てのとおりですが、フレームワークが提供している Mixin や変数を利用したい場合は、 @nuxtjs/style-resources を利用して読み込みます。

~/assets/utilities.scss

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
@import "~bulma/sass/utilities/derived-variables";
@import "~bulma/sass/utilities/animations";
@import "~bulma/sass/utilities/mixins";
@import "~bulma/sass/utilities/controls";

フレームワークが提供している変数などをインポートしたファイルを用意します。

あとは、 nuxt.config.js で設定するだけ。

nuxt.config.js

module.exports = {
  
  // 省略
    
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    sass: ['~/assets/utilities.scss']
  },
  
  // 省略
}

また、この utilities.scss を、先程作成した main.scss にインポートすることで、グローバルに利用することができます。

~/assets/main.scss

@import "utilities";

まとめ

前回は力不足で、微妙な情報を提供してしまいましたが（それなりに View があり申し訳ない……）、今回の記事ではだいぶスッキリしています。

「スタイルもプログラミング言語っぽく書ければいいのに…」という方は是非ためしてみてください！

それでは素敵な Sass ライフをー