
新しくNuxt.jsのプロジェクトを作成してから、`vue-loader`を使ってSCSSを導入するまでの手順です。公式にあるテンプレート利用しています。

SCSSとしていますがSassでも同様にできます。

## 環境

- Windows 10 Home
- Node.js v10.15.1
- npm 6.4.1
- yarn 1.15.2

Node.js / npm（ + yarn）の導入手順はこちらで紹介しています。
- [Windows](https://www.suzu6.net/posts/124-yarn-windows/)
- [Mac](https://www.suzu6.net/posts/45)
- [Ubuntu系](https://www.suzu6.net/posts/81-npm-install-ubuntu)

### 導入したもの

- node-sass: ^4.12.0
- nuxt: ^2.0.0
- sass-loader: ^7.1.0

## Nuxt.jsのプロジェクト作成

[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation)に従ってスターターテンプレートを使ってプロジェクトの作成を進めます。
個別にインストールしてスクラッチで作成することもできますが、`nuxt.config.js`の書き方など些細な点で悩むことが多いためテンプレートを使うことをお勧めします。

`<project-name>`は**sample**としておきます。

### create-nuxt-app を使用する

この項は[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation#nuxt-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)通りに進めて問題ないです。

```sh
# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample
```

インストールが進み、sampleのフォルダが作成されました。
続いていくつか質問されます。
カーソルの位置のものを選択しています。
スタイルはスクラッチで開発する予定だったため、今回はUIフレームワークを使っていません。

```sh
? Project name (sample) # プロジェクト名は？
? Project description (My posh Nuxt.js project) # プロジェクト説明は？
? Author name (suzu6) # 制作者は？
# パッケージマネージャを選択
? Choose the package manager 
> Yarn
  Npm
# UI フレームワークを選択
? Choose UI framework (Use arrow keys) 
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
# サーバのフレームワークを選択
? Choose custom server framework (Use arrow keys) 
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# モジュールを選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support
# リントツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
# テストのフレームワークを選択
? Choose test framework (Use arrow keys)
  None
> Jest
  AVA
# モードを選択（nuxt.configで変更可能）
? Choose rendering mode (Use arrow keys)
  Universal (SSR)
> Single Page App
```

インストールに成功したらのフォルダに移動して、立ち上げてみます。

```
> cd sample
> yarn dev
```

[http://localhost:3000/](http://localhost:3000/)でサイトを確認できます。


![template](/images/posts/170/173/1.png)


## SCSSを使えるようにする

本題です。

[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)をインストールして`.vue`の中で`<style lang="scss">`を使えるようにします。

参考：[プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors)

### vue-loaderをインストール

`SCSS`に必要なモジュールをインストールします。

```sh
# by npm
> npm install sass-loader node-sass --save-dev

# by yarn
> yarn add npm install sass-loader node-sass
```
`pakage.json`
```json
  "dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },
```

これで、`.vue`ファイル内で`SCSS`が使えるようになりました。
Nuxt.jsのホットリロードによってSCSSの修正が即座に反映され、開発が進みます。
以下のように`<style lang="scss">`を使えます。

```html
<style lang="scss">
.red {
  color: red
}
</style>
```

## 共通のSCSSファイルの設定

続いて、プロジェクトで共通のスタイルもSCSSで書けるようにします。

### .scssファイルを作成

`/assets/sass/app.scss`を作成して、読み込みませます。
同じフォルダのSCSSファイルをimportできるか試すため`variables.scss`と`common.scss`も同時に作成します。

`/assets/sass/app.scss`
```scss
// Variables
@import 'variables';

// common
@import 'common';
```

`/assets/sass/variables.scss`
```scss
$color-bg: rgb(248, 255, 187);
```

`/assets/sass/common.scss`
```scss
body {
    background-color: $color-bg;
}
```

背景色を変更するだけです。

### nuxt.config.jsの設定

`nuxt.config.js`にファイルのパスとSCSSであることを示せば勝手にやってくれます。
すごく簡潔だった。

`nuxt.config.js`
```js

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' },
  ],
```

背景色が変わりました！
こちらもファイルを保存するだけで変更がすぐに反映されるため、スタイルをいじるのが楽しくなります。

![2](/images/posts/170/173/2.png)

共通のSCSSには`nuxt-sass-resources-loader`も必要かと思っていたが、`nuxt.config.js`への記述だけで済んだ。

参考：[Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする](https://qiita.com/mimoe/items/890c4e681dac7c38322b)


Nuxt.jsのプロジェクトを作成してSCSSを導入するまで