MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法

【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法

公開日:2020年01月16日
最終更新日:2020年01月16日
オンスタ運営
プログラミング
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
このエントリーをはてなブックマークに追加
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
いまさらながら Vue.js 面白い!
一人でほそぼそと Vue.js を学んでいる小野です。
今日は Vue.js を利用する際につまづいた Sass のグローバルな読み込みについて備忘録がてら報告します。

vue-cli 3.x でグローバルな Sass を利用する


Vue.js で Sass を利用する際に、サイト内で共通で使用する変数や Mixin を毎回インポートするのは面倒ですよね。

例えば以下のコードで利用する $color-primary 変数を他のコンポーネントでも使いたい!
というケースを考えてみます。
<template>
  <div class="c-component"> テキストテキストテキストテキストテキスト</div>
</template>

<style scoped lang="scss">
$color-primary: #aabbcc;
.c-component {
 background: $color-primary; 
}
</style>
共通する Sass 変数や Mixin を読み込みしたいときは変数用の Sass ファイルを作成してインポートする方法があります。
<style lang="scss">
@import "./scss/_variables.scss";
.c-component {
  background: $color-primary;
}
</style>
でもたくさんコンポーネントがあったらこれはしんどいですね。
Vue.js では package.json と同じフォルダに vue.config.js を作成することで、グローバルな Sass のインポートが可能です。
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/scss/_variables.scss";`
      }
    }
  }
};

インターネット上の記事では prependData の部分を単に data として紹介されていることが多いのですが、data だと以下のようなエラーが出てコンパイルできませんでした。

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does
 not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

公式 sass-loader のドキュメントを見ると prependData が正解っぽいです。めっちゃ悩んだ。。。



一連の流れをまとめてみる


まずコマンドラインでプロジェクトを作成する。
npm install -g vue-cli
vue create my-project
cd my-project

次に SassLoader をインストール

npm install --save-dev node-sass sass-loader
次に vue.config.js を作成する。
vi vue.config.js
vue.config.js にグローバルで利用する SCSS を指定する

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/_variables.scss";
        `
      }
    }
  }
};
これで変数が定義されたSassファイルが各コンポーネントから利用できる。やった!

まとめ

Vue.js面白い!
vue-cliがあるとなお面白い!
みんなも触ってみよう!

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
プログラミング
公開日: 2020年02月19日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
[JavaScript_中級者への道]  プロトタイプについて – [2] クラスを定義して呼び出す
プログラミング
公開日: 2020年02月18日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [2] クラスを定義して呼び出す
  • # ES6
  • # JavaScript
  • # クラス
  • # プロトタイプ
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
プログラミング
公開日: 2020年02月18日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
プログラミング
公開日: 2017年06月19日
最終更新日: 2019年07月18日
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
オンスタ運営
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
プログラミング
公開日: 2019年08月04日
最終更新日: 2019年08月01日
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
  • # Scratch
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。