Nuxtのグローバルスタイルシート備忘録

グローバルスタイルシートは、よほど小さいプロジェクトでない限り使うことになるので、各種設定を備忘録的にここに記しておきます。

nuxt.config.js

export default {
  modules: [
    'bootstrap-vue/nuxt', // Bootstrap Vueの例
    '@nuxtjs/style-resources',
  ],

  styleResources: {
    scss: [
      // アンダースコア "_" とか ファイルの拡張子 ".scss" はちゃんとつける
      './assets/style/_global.scss'
    ]
  },
}

./assets/style/_global.scss

@import '~@/node_modules/bootstrap/scss/bootstrap'; // Bootstrapの例
@import '~@/node_modules/bootstrap-vue/src/index'; // Bootstrap Vueの例
@import '~@/assets/style/_variables';
@import '~@/assets/style/_style';

あとは、_variables.scssに変数を指定したり（$hoge: 128px;）、_style.scssにその変数を使ったスタイルクラスを定義したりするだけです。