Gridsome / Vue 上的 Tailwind 配置背景图像路径

问题描述

我在 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

解决方法

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

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