nuxtでいつもつまずくscssの設定

nuxtにおいて共通で使いたいglobal.scssの読み込ませ方とか、scss変数を全体に適用させたいとき毎度少しハマるので記事にします。
ポイントはnode-sassとsass-lodaerのversionです。

前準備

srcディレクトリに各ディレクトリを移動

nuxtはcreateした直後はpagesやassetsがrootに作られるためsrcディレクトリを自作し、node_modules/とtest/以外をsrcに移動させます。
お好みでどうぞ。

tsconfig.json

    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"] // 変更
    },

これで@がsrc/を指してくれるようになります。
もし移動させた場合は、以下の記述も変更します。

nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  srcDir: 'src/',　// 追記
  // 省略・・・

これでsrc配下のディレクトリを読み込んでくれるようになります。

共通のscssを読み込ませる

node-sassとsass-loaderのinstall

yarn add -D node-sass@5.0.0 sass-loade@10.1.1

package.json

{
  "dependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "10.1.1"
  }
}

nuxt.config.js

export default {
 css: ['~/assets/scss/global.scss'],
}

共通変数を持ったscssを読み込ませる

node-sassとsass-loaderのinstall

yanr add -D @nuxtjs/style-resources

nuxt.config.js

export default {

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/style-resources" // scss変数使用のmodule
  ],

  // @nuxtjs/style-resourcesのための記述
  styleResources: {
    scss: [
      '~assets/scss/_variables.scss'
    ]
  },

}

以上