Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたいこと

  • 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の更新を反映するには、アプリケーションの再起動が必要です。
  • ~または@を使うことで、ルートにアクセスできます(エイリアス-別名-
  • vueファイルのstyleassetsの中を指定するときは~assets/...とする

参考

2018.12.11 追記

@import "~/node_modules/bulma";

の記載場所について、
variable.scssの最後に書くと、2回読み込まれるなど優先度が高くなり、変数ではなく直接数値で指定してあるものを上書きすることが難しくなってくる。

common.scssの1行目に書いたほうが、扱いやすいかもしれない。

2019.5.16 追記

「nuxt-sass-resources-loader」はNuxt.js 2.4.0以降サポート終了したみたいです。

バージョンあげたら大変なことになった。。。
「@nuxtjs/style-resources」が強く推奨されているらしいので、これを使って解決しました。

参考サイト
https://qiita.com/tsukue/items/e3565d889ebe7b078748

mimoe
2013.04から1年間、専門学校でアプリ開発の勉強をし、2014.04からWeb制作会社で、主にフロントエンドの仕事をしています。 前職は接客だったので、プログラム関係Web関係はまだまだ初心者です。 自分の備忘記録のためにも書きます。
http://ameblo.jp/mimoesnotepad
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした