搜尋

首頁  >  問答  >  主體

Storybook with Tailwind - Tailwind 的背景影像未解析

Tailwind 背景圖片具有以下語法:

backgroundImage: (theme) => ({
"drop-arrow": "url('/res/public/images/drop_down_arrow.svg')",
...
})

其中 /res 位於資料夾 ../www/www/res.. 之外,但使用 url 在網路上進行解析。這個專案已經相當大了,我想介紹一下故事書。我新增了 @storybook/addon-styling 套件並完成了設定指南。當嘗試建立故事書時,它無法解析圖像,因為它們位於另一個資料夾中。

我嘗試過重命名 "drop-arrow": "url('/res/public/images/drop_down_arrow.svg')",“drop-arrow”:“url('../www/www/res/public/images/drop_down_arrow.svg')”,。有一些進展,但我不想碰,因為它可能會破壞一些東西。是否可以為故事書使用自訂順風配置或正確解析資產?

P粉786432579P粉786432579243 天前372

全部回覆(1)我來回復

  • P粉562845941

    P粉5628459412024-03-30 09:22:57

    我也遇到同樣的問題,嘗試了很多方法,但沒有成功。您找到解決方案了嗎?

    我在 tailwind.config.js 中有這個圖片擴充主題:

    backgroundImage: {
        'grid': "url('/img/bg-grid.png')",
    }

    如果我刪除 url 偽函數,故事書將啟動,但停止在頁面中處理背景。

    回覆
    0
  • 取消回覆