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に加えて、プレフィックとして~を付けて記述をすれば良い。