webpackのaliasをVue単一コンポーネントのstyle内で使用する方法

webpack の alias とは

こういった場合、相対パスで指定がし辛い。

import { hoge } from "../script/sugoi.js";

だが、下記のようにwebpack.config.jsで alias 設定ができる。

resolve: {
  alias: {
    '@script': path.join(__dirname, '../script/'),
    '@images': path.resolve(__dirname, '../assets/images'),
  }
},

上記を設定すると下記のように@scriptを path の一部として書ける。

import { hoge } from "@script/sugoi.js";

指定パスを webpack 側で吸収しているため、複数同一の相対パスが並んだ記述の場合に、後々の変更がある時は特に威力を発揮するだろう。

記述方法

先述の例だと JavaScript 上の記述だったが、Vue の単一コンポーネントの場合でも<script>内も同様に alias を使った指定が可能ではある。

<style>の場合はどうなのか。結論から述べると vue-loader などへの追加設定などは不要ではあるが、少し記述方法が異なる。

ダメな例

<style>
  body {
    background: url("@images/sugoi-haikei.png");
  }
</style>

上記の記述方法ではパスを解決してくれずエラーとなってしまう。

成功例

下記のような指定でパス解決してくれ読み込みが可能となる。(webpack.config.jsの設定は先述のresolve.aliasの記述という前提)

<style>
  body {
    background: url("~@images/sugoi-haikei.png");
  }
</style>

先の alias に加えて、プレフィックとして~を付けて記述をすれば良い。