vue-loader - Vue.js

初学者のメモ書きなので注意。

Vue.jsの単一ファイルコンポーネントをよしなにしてくれるツール。（超曖昧な理解）

単一ファイルコンポーネントとはつまり拡張子.vueで、<template>, <script>, <style>を1ファイルに書いたもの。これを他のコンポーネントから読み込んだり読み込まれたりして、機能毎にファイルを分けて開発できる。

当然、そのままではブラウザは解釈できないので、解釈できるhtml, css, jsにコンパイルする必要がある。

そのコンパイルにはwebpackがよく使われていてる。webpackはさらに裏で言語毎に様々なツールやプラグインを使ってまとめ上げているので、設定が多岐に渡り、把握が難しい。

vue-loaderは、そんなwebpackとvueの架け橋的な存在をするwebpack上のプラグイン。vueの構造に特化して、webpackでのコンパイル設定をいい感じに渡してくれる。

Vue.jsを動かすだけなら、初期設定がだいたい出来ているのでいじる必要は無い。

PhpStormでプロジェクトを作成したときのフォルダ構造では、./build/vue-loader.conf.js で記述されている。

さらに、css-loader などは分離して ./build/utils.js で記述されている。

この辺のファイルはいじっていいものかどうか（後から更新で上書きされたりしないか）よくわからないが、チュートリアルで util.js を変更してる例が出てきているので、多分いいんだろう。

npm で、scss用のモジュールを入れていなければ入れる。scssという名前でも使うモジュールはsass。

> npm i -D node-sass sass-loader

後は、基本的な設定は utils.js で済んでいるので、.vueファイルに以下のように書くと使える

<style lang="scss">
#header {
  color: #fff;
  &:hover {
    color: #aaa;
  }
}
</style>

全体でグローバルな変数値や、便利関数をmixinとしてどこからでも使いたい場合。

適当にたとえば ./src/assets/scss/global.scss あたりにグローバル定義用ファイルを作り、中で変数などを記述する。

$theme-color: #ff0;  // 共通のテーマカラーを指定

これを読み込むためには、とりあえずは、各.vueファイルの<style>の先頭でimportすればよい。

<template>...</template>
<script>...</script>

<style lang="scss">
@import url("../assets/scss/global.scss")

#app {
  background-color: $theme-color;
}
</style>

が、これではいちいち面倒だし、ファイル名直書きで保守性も低下する。これをloaderの設定で、何も書かずとも常に読み込むように出来る。

• Vue単一ファイルコンポーネントで共通のSCSSファイルを読み込む - UUUM攻殻機動隊(エンジニアブログ)

exports.cssLoaders = function (options) {
  // ...
  return {
    css: generateLoaders(),
    // ...
    scss: generateLoaders('sass', {  // 以下のオプションを追記
      data: '@import global.scss'
      includePaths: [path.resolve(__dirname, '../src/assets/sass/')],
    }),
// ...
}

<template>...</template>
<script>...</script>

<style lang="scss">
#app {
  background-color: $theme-color;
}
</style>