0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel の vite の css から public/assets を絶対パス参照させる

Last updated at Posted at 2022-07-11

やりたいこと

laravel的な環境で app.scss から /assets/logo.jpg を絶対パス参照したい

ディレクトリ構成
www/
  public/
    assets/
      logo.jpg
  resouces/
    css/
      app.scss
  vite.config.js

こうしました

rootに assets をシンボリックリンクしました。

$ cd www
$ ln -s public/assets

これで npm run dev 時も、npm run build時も、画像を参照できます。

app.scss
div {
  background: url("/assets/logo.jpg")
}

これは避けた

vite.config.js
resolve: {
    alias: {
        "@": `${__dirname}/public/`, // url("@/assets/logo.jpg")で参照する
    },
}

こんな感じに参照しようとすると、build時に、参照画像を public/build/ 内にcopyしちゃいます。これはやだったので、やめました。

もっとよいやりかた、どなたか教えてください!!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?