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

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 がそのまま使える記法も用意されていますよ!)

:link: 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;
}

便利ですね! :yum:

グローバルな 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 ライフをー :raised_hand:

kurararara
for(;;)alert('私が町長です。');
peoplesoftware
主にJavaやC#を使った受託開発や、BaaSなどのクラウドサービス、スマホアプリの自社開発を行っている会社です。※各記事の内容は個人の見解であり、所属する会社の公式見解ではありません。
http://www.pscsrv.co.jp/
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