LoginSignup
16
14

More than 3 years have passed since last update.

Sass を Nuxt.js で使ってみよう

Last updated at Posted at 2019-01-18

この記事は情報が古いので書き直しました。
(追記する方法も考えましたが、大幅に修正することになるので書き直しました。ご了承下さい)
Nuxt.js で Sass/SCSS を使いたくて開いた方は こちら を読んでみてください。

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 をインストール

いろいろと失敗談を記載していますので、結果だけ知りたい方は こちら へどうぞ。

Nuxt.js で使うには?

Nuxt.jsSass を使う場合、次のように記載します。

<style lang="sass">
.red
  color: red
</style>
このままでビルドすると
ERROR in ./pages/index.vue
Module not found: Error: Can't resolve 'sass-loader' in '<workspace>\vue-projects\my-project'

sass-loader が無い、というエラーになってしまいます。
Sass を利用する場合、プリプロセッサをインストールすることで利用可能になります。

ローダー入れてみよう
> yarn add --dev vue-loader sass-loader

よしよし、再ビルド。

ERROR in multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
Module not found: Error: Can't resolve 'eslint-loader' in '<workspace>\vue-projects\my-project'

ぐはっ :dizzy_face:

ローダーを入れてみよう(その2)
> yarn add --dev eslint-loader

(てか eslnt 入ってるよね? もはや迷走

This dependency was not found:

何がないのか??

起動したアプリの画面を見ると…

NuxtServerError

Cannot find module './index.vue?vue&type=style&index=0&lang=sass&'

なにやら sass が読み込めていない感じ。

試行錯誤しよう
> yarn add --dev node-sass
> yarn add --dev nuxt-sass-resources
> yarn add --dev style-loader

うおぉぉぉぉぉぉおおおおお

最終的に…
> yarn add --dev vue-loader node-sass sass-loader nuxt-sass-resources-loader style-loader vue-style-loader css-loader

これらをインストールするのと(いらないものもあるかも?)、nuxt.config.js

module.exports = {

  // 省略

  /*
  ** Build configuration
  */
  build: {

    // 省略

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && process.isClient) { // <= `ctx.isClient` を `process.isClient` に変更!
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

ctx.isClientprocess.isClient に変更することでエラーが解消しました。

パト○ッシュ…僕もう疲れたよ… :weary:

via. プリプロセッサを使うには? | Nuxt.js 公式

via. NuxtのESLintのエラー対応

Vue-CLI からプロジェクトを作る場合は

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS
  Less
  Stylus

CSS のプリプロセッサを選択するところで Sass/SCSS を選択すれば OK です!

記法について

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:

まとめ

導入に割と苦労しましたが、これで Sass を使うことができるようになりました。

個人的には セレクターをネストして記載できる ことに大きなメリットを感じています。

なれると普通の CSS 書くときに混乱しますが…

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

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

インデックスページから来た人向け

今回はアプリの目に見える進歩はありませんが、コーダーが快適にコーディングできると良いアプリができるものです!(迷信)

そのうち紹介する(仮) bulma も、 Sass と組み合わせて使うことで、より便利になります。

少しずつ機能も増やしていきますので、よかったら他の記事も見てみてください!

:link: Vue.js 初心者がなにか作りきってみる(願望)

16
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
14