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