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


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

# 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` の略らしく、翻訳すると

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

だそうです！

```sass
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 公式](https://sass-lang.com/)



# Sass をインストール

いろいろと失敗談を記載していますので、結果だけ知りたい方は [こちら](https://qiita.com/kurararara/items/76d7e6a195ee6cd638dd#%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AB) へどうぞ。

### Nuxt.js で使うには？

`Nuxt.js` で `Sass` を使う場合、次のように記載します。

```sass
<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` を利用する場合、プリプロセッサをインストールすることで利用可能になります。



##### ローダー入れてみよう

```shell
> 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:



##### ローダーを入れてみよう（その２）

```shell
> 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` が読み込めていない感じ。



##### 試行錯誤しよう

```shell
> yarn add --dev node-sass
```

```shell
> yarn add --dev nuxt-sass-resources
```

```shell
> yarn add --dev style-loader
```

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



##### 最終的に…

```shell
> yarn add --dev vue-loader node-sass sass-loader nuxt-sass-resources-loader style-loader vue-style-loader css-loader
```

これらをインストールするのと（いらないものもあるかも？）、`nuxt.config.js` を

```javascript
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.isClient` を `process.isClient` に変更することでエラーが解消しました。



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



*via. [プリプロセッサを使うには？ | Nuxt.js 公式](https://ja.nuxtjs.org/faq/pre-processors/)*

*via. [NuxtのESLintのエラー対応](https://qiita.com/m1ul24/items/efd2b9af1954cce6bcc7)*


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

```shell
? 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` を利用した場合

```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 をそのまま利用することが出来ます！

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

  li { display: inline-block; }

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



### コンパイル結果

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

```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` ライフをー :hand:



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

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

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

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

:link: [Vue.js 初心者がなにか作りきってみる（願望）](https://qiita.com/kurararara/items/9c4f78eb42e657221c06)