WebpackにバンドルするCSSファイル内にて相対パスで親ディレクトリ配下のファイルを参照したい。

Question

Railsで開発をしています。webpakcerにcssを読み込ませているのですが、css内の@font-face{src: url}で親ディレクトリ配下のフォントファイルを参照したいです。そのままバンドルするとモジュールを参照できずエラーになってしまうのですが解決策はありますか？

親ディレクトリ
├fonts
└css

Answer 1

結局cssを別にして、vueをimportしているjsにcssをimportすることで解決しました。

Answer 2

相対パスで正しくそのファイルを参照すればいいだけ、それだけのはなしです

で、問題はなんでしょうか

Comments

[NoSuke23]

Vueコンポーネントにcssをimportしているのですが、どうやら参照元がVueコンポーネントのディレクトリになってしまっているせいで参照できないようです。

[NoSuke23]

ディレクトリを掘れば結果的に相対パスが同じになって解決できそうですが根本的な解決策はありますか？

[y_waiwai]

どこでその、「親ディレクトリ配下のファイル」ってのを指定してるんでしょう

[NoSuke23]

表現が適切でなかったかもしれません。具体的には
hoge_dir
├Hoge.vue
├css
│└hoge.css
└fonts
　└hoge.tff
でhoge.cssがurl("../fonts/hoge.tff")の用に参照していて、
さらにHoge.vueが@import "./css/hoge.css"と参照しています。
これをwebpakcでバンドルすると
"../fonts/hoge.tff"がhoge_dir内で見つかりませんでした。というエラーが出力されます。
hoge_dir
├vue
│└hoge.vue
├css
│└hoge.css
└fonts
　└hoge.tff
とすれば解決しますが、前のディレクトリの形でバンドルできないものかという話なのです。