Not showing image and CSS animation after nuxt generate (Nuxt 2.14.6)

109 Views Asked by At

I made a banner where the title is work with CSS animation along with static image:

.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:84%; left:-1%;
  width:0; height:36px;
  opacity:100%;
  transform:translateY(-50%);
  background:repeat-x url("/images/strikethrough.png");
  animation: strike 1s linear .3s 1 forwards;
}
@keyframes strike {
  to { width: 9%; }
  }

CSS code on above is animating the image from static folder /images/strikethrough.png, and here where the strike class appear in HTML:

<h1 class="font-bold text-28 md:text-3xl lg:text-42 strike">
   {{ title }}
</h1>

The animation is actually working in dev mode, when I generate it into static it's suddenly not working at all, you can check the nuxt.config.js file in down here:

import { I18N } from './config/i18n'
const path = require('path')

export default {
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: false,
  target: 'static',

  generate: {
    fallback: true
  },

  env: {
    base: process.env.base,
    title: process.env.title,
    desc: process.env.desc,
    logo: process.env.logo,
    google_analytics_id: process.env.google_analytics_id
  },

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'website: Solution' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600;1,700&display=swap' }
    ]
  },

  /* nuxt.js Router */
  router: {
    middleware: ['show_link_contact']
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~assets/styles/tailwind.css'
  ],

  loading: {
    color: '#417AC9',
    height: '5px'
  },

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    { src: '~plugins/vuespinner.js' },
    { src: '~plugins/vuelazyload.js' },
    // { src: "~plugins/crisp.js", mode: "client" },
    // Mixins
    { src: '~mixins/global.js' },
    // Models
    '~/models/news',
    '~/models/gallery',
    '~/models/clients',
    '~/models/career',
    '~/models/contact'
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'

  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'nuxt-purgecss',
    ['nuxt-i18n', I18N],
    'vue-social-sharing/nuxt'
  ],

  purgeCSS: {
    mode: 'postcss',
    enabled: (process.env.NODE_ENV === 'production'),
    whitelist: [
      'slick-',
      'career__jobdesk',
      'client__',
      'form__',
      'home-',
      'card-product',
      'grid__excellence',
      'btn__jobdesk',
      'popup__gallery',
      'leaflet-',
      'gallery',
      'v-bounce'
    ],
    whitelistPatterns: [
      /^slick-/, /^career__jobdesk/, /^client__/, /^form__/, /^home-/, /^card-product/, /^grid__excellence/, /^btn__jobdesk/, /^popup__gallery/,
      /^leaflet-/, /^gallery/, /^v-bounce/
    ]
  },

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    postcss: {
      plugins: {
        'postcss-import': {},
        tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
        'postcss-nested': {}
      }
    },
    preset: {
      stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          tailwindConfig: {
            test: /tailwind\.config/,
            chunks: 'all',
            priority: 10,
            name: true
          }
        }
      }
    }
  }
  
}

Note: I'm newbie to nuxt and open to all solution

0

There are 0 best solutions below