Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする

やりたいこと

Nuxt.jsの環境でSassを使いたい
CSSフレームワーク（Bulma）を導入したい
設定した変数をvueファイルで使いたい
共通スタイルcommon.cssみたいなファイルを全ページで読み込みたい

使うもの

Bulma
node-sass
sass-loader
nuxt-sass-resources-loader

作業内容

ターミナルでインストール

$ npm install sass-loader node-sass --save-dev 
$ npm install bulma --save 
$ npm install --save-dev nuxt-sass-resources-loader

Sassファイルを作成する

変数を設定するファイル

/assets/sass/variable.scss

// Import a Google Font 
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 
 
// Set your brand colors 
$purple: #8A4D76; 
$pink: #FA7C91; 
$brown: #757763; 
$beige-light: #D0D1CD; 
$beige-lighter: #EFF0EB; 
 
// Update Bulma's global variables 
$family-sans-serif: "Nunito", sans-serif; 
$grey-dark: $brown; 
$grey-light: $beige-light; 
$primary: $purple; 
$link: $pink; 
 
// Update some of Bulma's component variables 
$control-border-width: 2px; 
$input-background-color: $beige-lighter; 
$input-border-color: transparent; 
$input-shadow: none; 
 
// Import the rest of Bulma 
@import "~/node_modules/bulma";

（Bulmaのサイトに載っているコードです。）

共通スタイル

/assets/sass/common.scss

.title{ 
  position: relative; 
  padding: 0.5em; 
  background: $main; 
  color: white; 
  ::before { 
    position: absolute; 
    content: ''; 
    top: 100%; 
    left: 0; 
    border: none; 
    border-bottom: solid 15px transparent; 
    border-right: solid 20px $grey; 
  } 
} 
 
.tooltip { 
  position: relative; 
  display: inline-block; 
  margin: 1.5em 0; 
  padding: 7px 10px; 
  min-width: 120px; 
  max-width: 100%; 
  color: $text; 
  font-size: $size-small; 
  background: $info; 
  &:before{ 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -15px; 
    border: 15px solid transparent; 
    border-top: 15px solid $info; 
  } 
} 
 
.position_center{ 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform : translate(-50%,-50%); 
}

`nuxt.config.js`に追記する

nuxt.config.js

module.exports = { 
  modules: [ 
    ['nuxt-sass-resources-loader', [ 
      '~/assets/sass/variable.scss', 
    ]], 
  ], 
  css: [ 
    { src: '~/assets/sass/common.scss', lang: 'scss' }, 
  ], 
};

これで、やりたいことの内容はできるようになりました。

ポイントを解説

Nuxt.jsの環境でSassを使いたい

$ npm install sass-loader node-sass --save-dev

これで、Sassをつかえるようにし、コンパイルしてくれます。

アプリケーションを再起動しなくても、自動的にコンパイルしてくれます。

Sassファイルは/assets/の中に作成します。

CSSフレームワーク（Bulma）を導入したい

$ npm install bulma --save

カスタマイズをせずに使う場合は、下記をnuxt.config.jsに追記します。

nuxt.config.js

module.exports = { 
  css: [ 
    { src: '~/node_modules/bulma/bulma.sass', lang: 'sass' }, 
  ], 
};

カスタマイズする場合は、カスタマイズ内容を書いたファイルの最後にBulmaを読み込みます。

（nuxt.config.jsには、カスタマイズ内容を書いたファイルを読み込みます。）

@import "~/node_modules/bulma";

設定した変数をvueファイルで使いたい

$ npm install --save-dev nuxt-sass-resources-loader

vueファイルで使いたい変数を設定したファイルをnuxt.config.jsに追記します。

nuxt.config.js

module.exports = { 
  modules: [ 
    ['nuxt-sass-resources-loader', [ 
      '~/assets/sass/variable.scss', 
    ]], 
  ], 
};

こうすることで、Sassファイルでもimportの記述なしで使うことができます。

vueファイルでのSassの書き方

menu.vue

<template> 
  <ul> 
    <li>メニュー1</li> 
    <li>メニュー2</li> 
    <li>メニュー3</li> 
    <li>メニュー4</li> 
  </ul> 
</template> 
 
<style lang="scss" scoped> 
 ul, ol { 
  padding: 0; 
  position: relative; 
} 
 
ul li, ol li { 
  color: $primary; 
  border-left: solid 6px $primary; 
  background: $grey-lighter; 
  margin-bottom: 3px; 
  line-height: 1.5; 
  padding: 0.5em; 
  list-style-type: none!important; 
} 
</style>

こんな感じでstyle要素にlang属性を設定するとSassが使えます。
scopedは、このファイル内のみにスタイルを適用したい時に使います。

共通スタイルcommon.cssみたいなファイルを全ページで読み込みたい

vueファイルで使いたい時にimportすれば使えるけれど、それでは毎回書かないといけないのでとてもめんどくさい。

そんな時はnuxt.config.jsに書きます。

nuxt.config.js

module.exports = { 
  css: [ 
    { src: '~/assets/sass/common.scss', lang: 'scss' }, 
  ], 
};

これで、各ファイルで指定しなくても、全ページでそのスタイルを当てられます。

その他気をつけることなど

nuxt.config.jsの更新を反映するには、アプリケーションの再起動が必要です。
~または@を使うことで、ルートにアクセスできます（エイリアス-別名-）

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫