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サービス紹介【タイプ別】
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
Webデザイン
プログラミング
公開日: 2017年07月17日
最終更新日: 2019年05月28日
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
プログラミング
公開日: 2017年06月19日
最終更新日: 2019年07月18日
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
オンスタ運営
PHPエンジニアが取得したい資格!PHP技術者認定試験とは?
オンライン学習
プログラミング
公開日: 2019年06月14日
最終更新日: 2019年06月18日
PHPエンジニアが取得したい資格!PHP技術者認定試験とは?
  • # PHP技術者認定試験
  • # pickup
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
オンライン学習
プログラミング
公開日: 2019年06月25日
最終更新日: 2019年07月11日
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
  • # HTML5プロフェッショナル認定資格
オンスタ運営
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
プログラミング
公開日: 2019年08月04日
最終更新日: 2019年08月01日
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
  • # Scratch
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
全記事一覧

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

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

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

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