vue.js - Gridsome / Vue 上的 Tailwind 配置背景图像路径

Question

我在我们的 Gridsome 创建的网页中使用 Tailwind，但在 tailwind.config.js 文件中的 backgroundImage 中出现错误。这是文件：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: theme => ({
        'mobile': "url('~/assets/mobile_background.jpg')"
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我得到的错误是：

未找到此相关模块：

• ../../../../../../../assets/mobile_background.jpg 在 ./node_modules/css-loader/dist/cjs.js??ref--2-oneOf-1 -1!./node_modules/postcss-loader/src??ref--2-oneOf-1-2!./src/main.css

标签： vue.jstailwind-cssgridsome

Answer 1

经过一番尝试，我找到了解决方案。我必须将 assets 文件夹放在 /static 下才能在 tailwind.config.js 中使用它，如下所示：

extend: {
 backgroundImage: theme => ({
  'mobile': "url('~/assets/mobile_background.jpg')"
 })
},