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

# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample

? 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

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

# by yarn
> yarn add npm install sass-loader node-sass

"dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },

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

// Variables
@import 'variables';

// common
@import 'common';

$color-bg: rgb(248, 255, 187);

body {
    background-color: $color-bg;
}

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