title: Vue 3 - Vite app missing some CSS rules after build
body: <p>So, I've been struggling really hard on this, been working for a long time on a big update for my app, everything runs smooth and great on development, but once I build for production some of the CSS rules are missing, some elements are not ok, colors aren't showing as they should, and flexbox seems off...</p>
  <p>So let me start from the beginning:</p>
  <p><strong>Evironment:</strong></p>
  <ul>
  <li>Vite 2.6.11</li>
  <li>Vue 3.2.20</li>
  <li> ref sugar
  </li>
  <li>Firebase Hosting</li>
  </ul>
  <p>Here are my dependencies</p>
  <pre><code>  &quot;dependencies&quot;: {
      &quot;@ckeditor/ckeditor5-build-classic&quot;: &quot;30.0.0&quot;,
      &quot;@ckeditor/ckeditor5-vue&quot;: &quot;2.0.1&quot;,
      &quot;@hennge/vue3-pagination&quot;: &quot;^1.0.17&quot;,
      &quot;@iconify/iconify&quot;: &quot;2.0.4&quot;,
      &quot;@mapbox/mapbox-gl-geocoder&quot;: &quot;4.7.4&quot;,
      &quot;@popperjs/core&quot;: &quot;2.10.2&quot;,
      &quot;@vueform/multiselect&quot;: &quot;2.2.0&quot;,
      &quot;@vueform/slider&quot;: &quot;2.0.5&quot;,
      &quot;@vuelidate/core&quot;: &quot;^2.0.0-alpha.21&quot;,
      &quot;@vuelidate/validators&quot;: &quot;^2.0.0-alpha.18&quot;,
      &quot;@vueuse/core&quot;: &quot;6.7.3&quot;,
      &quot;@vueuse/head&quot;: &quot;0.6.0&quot;,
      &quot;animate.css&quot;: &quot;^4.1.1&quot;,
      &quot;ant-design-vue&quot;: &quot;^2.2.8&quot;,
      &quot;apexcharts&quot;: &quot;3.28.3&quot;,
      &quot;axios&quot;: &quot;0.22.0&quot;,
      &quot;billboard.js&quot;: &quot;3.1.5&quot;,
      &quot;bulma&quot;: &quot;0.9.3&quot;,
      &quot;bulma-css-vars&quot;: &quot;0.7.0&quot;,
      &quot;dayjs&quot;: &quot;1.10.7&quot;,
      &quot;dragula&quot;: &quot;3.7.3&quot;,
      &quot;dropzone&quot;: &quot;5.9.3&quot;,
      &quot;filepond&quot;: &quot;4.30.3&quot;,
      &quot;filepond-plugin-file-validate-size&quot;: &quot;2.2.5&quot;,
      &quot;filepond-plugin-file-validate-type&quot;: &quot;1.2.6&quot;,
      &quot;filepond-plugin-image-crop&quot;: &quot;2.0.6&quot;,
      &quot;filepond-plugin-image-edit&quot;: &quot;1.6.3&quot;,
      &quot;filepond-plugin-image-exif-orientation&quot;: &quot;1.0.11&quot;,
      &quot;filepond-plugin-image-preview&quot;: &quot;4.6.10&quot;,
      &quot;filepond-plugin-image-resize&quot;: &quot;2.0.10&quot;,
      &quot;filepond-plugin-image-transform&quot;: &quot;3.8.7&quot;,
      &quot;firebase&quot;: &quot;9.1.3&quot;,
      &quot;flag-icon-css&quot;: &quot;^3.5.0&quot;,
      &quot;imask&quot;: &quot;6.2.2&quot;,
      &quot;mapbox-gl&quot;: &quot;2.5.0&quot;,
      &quot;markdown-it-emoji&quot;: &quot;2.0.0&quot;,
      &quot;notyf&quot;: &quot;3.10.0&quot;,
      &quot;nprogress&quot;: &quot;0.2.0&quot;,
      &quot;photoswipe&quot;: &quot;4.1.3&quot;,
      &quot;pinia&quot;: &quot;^2.0.0-rc.15&quot;,
      &quot;pinia-plugin-persist&quot;: &quot;^0.0.92&quot;,
      &quot;qrcode-vue3&quot;: &quot;^1.4.17&quot;,
      &quot;simple-datatables&quot;: &quot;3.1.2&quot;,
      &quot;simplebar&quot;: &quot;6.0.0-beta.10&quot;,
      &quot;simplebar-vue&quot;: &quot;2.0.0-beta.10&quot;,
      &quot;stylelint-csstree-validator&quot;: &quot;^1.9.0&quot;,
      &quot;sweetalert2&quot;: &quot;^10.16.7&quot;,
      &quot;tiny-slider&quot;: &quot;2.9.3&quot;,
      &quot;tippy.js&quot;: &quot;6.3.2&quot;,
      &quot;tslib&quot;: &quot;2.3.1&quot;,
      &quot;v-calendar&quot;: &quot;3.0.0-alpha.5&quot;,
      &quot;v-offline&quot;: &quot;^3.0.0&quot;,
      &quot;vant&quot;: &quot;^3.2.6&quot;,
      &quot;vee-validate&quot;: &quot;4.5.4&quot;,
      &quot;vivus&quot;: &quot;0.4.6&quot;,
      &quot;vue&quot;: &quot;3.2.20&quot;,
      &quot;vue-accessible-color-picker&quot;: &quot;3.0.0&quot;,
      &quot;vue-currency-input&quot;: &quot;^2.0.1&quot;,
      &quot;vue-i18n&quot;: &quot;9.2.0-beta.15&quot;,
      &quot;vue-router&quot;: &quot;4.0.12&quot;,
      &quot;vue-scrollto&quot;: &quot;2.20.0&quot;,
      &quot;vue-stripe-menu&quot;: &quot;^2.1.1&quot;,
      &quot;vue-tippy&quot;: &quot;6.0.0-alpha.33&quot;,
      &quot;vue-toastification&quot;: &quot;^2.0.0-rc.1&quot;,
      &quot;vue3-apexcharts&quot;: &quot;1.4.1&quot;,
      &quot;vue3-burger-menu&quot;: &quot;^1.1.1&quot;,
      &quot;vue3-carousel&quot;: &quot;^0.1.28&quot;,
      &quot;vue3-clipboard&quot;: &quot;^1.0.0&quot;,
      &quot;vueperslides&quot;: &quot;^3.3.2&quot;,
      &quot;xlsx&quot;: &quot;^0.17.3&quot;,
      &quot;yup&quot;: &quot;0.32.9&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@commitlint/cli&quot;: &quot;13.2.0&quot;,
      &quot;@commitlint/config-conventional&quot;: &quot;13.2.0&quot;,
      &quot;@commitlint/prompt-cli&quot;: &quot;13.2.0&quot;,
      &quot;@iconify/json&quot;: &quot;1.1.410&quot;,
      &quot;@intlify/vite-plugin-vue-i18n&quot;: &quot;2.4.0&quot;,
      &quot;@types/dragula&quot;: &quot;3.7.1&quot;,
      &quot;@types/luxon&quot;: &quot;^1.27.1&quot;,
      &quot;@types/mapbox-gl&quot;: &quot;2.4.2&quot;,
      &quot;@types/mapbox__mapbox-gl-geocoder&quot;: &quot;4.7.1&quot;,
      &quot;@types/markdown-it&quot;: &quot;12.2.1&quot;,
      &quot;@types/node&quot;: &quot;16.10.2&quot;,
      &quot;@types/nprogress&quot;: &quot;0.2.0&quot;,
      &quot;@types/photoswipe&quot;: &quot;4.1.2&quot;,
      &quot;@types/prismjs&quot;: &quot;1.16.6&quot;,
      &quot;@types/simplebar&quot;: &quot;5.3.3&quot;,
      &quot;@types/vivus&quot;: &quot;0.4.4&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.33.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;4.33.0&quot;,
      &quot;@vitejs/plugin-vue&quot;: &quot;1.9.3&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;3.2.20&quot;,
      &quot;autoprefixer&quot;: &quot;9.8.6&quot;,
      &quot;commitlint&quot;: &quot;13.2.0&quot;,
      &quot;cross-env&quot;: &quot;7.0.3&quot;,
      &quot;cypress&quot;: &quot;8.5.0&quot;,
      &quot;eslint&quot;: &quot;7.32.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;8.3.0&quot;,
      &quot;eslint-plugin-md&quot;: &quot;1.0.19&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;7.19.0&quot;,
      &quot;eslint-plugin-vuejs-accessibility&quot;: &quot;^0.7.1&quot;,
      &quot;gray-matter&quot;: &quot;4.0.3&quot;,
      &quot;lint-staged&quot;: &quot;11.2.0&quot;,
      &quot;markdown-it&quot;: &quot;12.2.0&quot;,
      &quot;markdown-it-anchor&quot;: &quot;8.3.1&quot;,
      &quot;npm-run-all&quot;: &quot;4.1.5&quot;,
      &quot;path&quot;: &quot;^0.12.7&quot;,
      &quot;plyr&quot;: &quot;3.6.8&quot;,
      &quot;postcss-nested&quot;: &quot;4.2.3&quot;,
      &quot;prettier&quot;: &quot;2.4.1&quot;,
      &quot;prismjs&quot;: &quot;1.25.0&quot;,
      &quot;rimraf&quot;: &quot;3.0.2&quot;,
      &quot;rollup&quot;: &quot;2.58.3&quot;,
      &quot;rollup-plugin-purgecss&quot;: &quot;^4.0.3&quot;,
      &quot;sass&quot;: &quot;1.32.13&quot;,
      &quot;standard-version&quot;: &quot;9.3.2&quot;,
      &quot;stylelint&quot;: &quot;13.13.1&quot;,
      &quot;stylelint-config-prettier&quot;: &quot;8.0.2&quot;,
      &quot;stylelint-config-standard&quot;: &quot;22.0.0&quot;,
      &quot;stylelint-scss&quot;: &quot;3.21.0&quot;,
      &quot;typescript&quot;: &quot;4.4.3&quot;,
      &quot;unplugin-vue-components&quot;: &quot;0.16.0&quot;,
      &quot;vfonts&quot;: &quot;^0.1.0&quot;,
      &quot;vite&quot;: &quot;2.6.11&quot;,
      &quot;vite-imagetools&quot;: &quot;3.6.8&quot;,
      &quot;vite-plugin-fonts&quot;: &quot;0.2.2&quot;,
      &quot;vite-plugin-imagemin&quot;: &quot;0.4.6&quot;,
      &quot;vite-plugin-pages&quot;: &quot;0.18.1&quot;,
      &quot;vite-plugin-purge-icons&quot;: &quot;0.7.0&quot;,
      &quot;vite-plugin-pwa&quot;: &quot;0.11.3&quot;,
      &quot;vite-plugin-radar&quot;: &quot;0.2.0&quot;,
      &quot;vite-svg-loader&quot;: &quot;^2.2.0&quot;,
      &quot;vue-tsc&quot;: &quot;0.3.0&quot;,
      &quot;yorkie&quot;: &quot;2.0.0&quot;
    }
  </code></pre>
  <p>Here is my vite.config.ts</p>
  <pre><code>import { defineConfig } from 'vite'
  // @ts-ignore
  import path from 'path'
  import Vue from '@vitejs/plugin-vue'
  import Pages from 'vite-plugin-pages'
  import Components from 'unplugin-vue-components/vite'
  import ViteFonts from 'vite-plugin-fonts'
  import ViteRadar from 'vite-plugin-radar'
  import PurgeIcons from 'vite-plugin-purge-icons'
  import { imagetools } from 'vite-imagetools'
  import ImageMin from 'vite-plugin-imagemin'
  import { vueI18n } from '@intlify/vite-plugin-vue-i18n'
  import { VitePWA } from 'vite-plugin-pwa'
  import purgecss from 'rollup-plugin-purgecss'
  import ViteComponents, {
    AntDesignVueResolver,
    VantResolver
  } from 'unplugin-vue-components/resolvers'
  
  const SILENT = Boolean(process.env.SILENT) ?? false
  const SOURCE_MAP = Boolean(process.env.SOURCE_MAP) ?? false
  
  /**
   * This is the main configuration file for vitejs
   *
   * @see https://vitejs.dev/config
   */
  export default defineConfig({
    // Project root directory (where index.html is located).
    root: process.cwd(),
    // Base public path when served in development or production.
    // You also need to add this base like `history: createWebHistory('my-subdirectory')`
    // in ./src/router.ts
    // base: '/my-subdirectory/',
    base: '/',
    // Directory to serve as plain static assets.
    publicDir: 'public',
    // Adjust console output verbosity.
    logLevel: SILENT ? 'error' : 'info',
    /**
     * By default, Vite will crawl your index.html to detect dependencies that
     * need to be pre-bundled. If build.rollupOptions.input is specified,
     * Vite will crawl those entry points instead.
     *
     * @see https://vitejs.dev/config/#optimizedeps-entries
     */
    optimizeDeps: {
      include: [
        '@ckeditor/ckeditor5-vue',
        '@ckeditor/ckeditor5-build-classic',
        '@iconify/iconify',
        '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.min.js',
        '@vueuse/core',
        '@vueuse/head',
        '@vueform/multiselect',
        '@vueform/slider',
        'axios',
        'billboard.js',
        'dayjs',
        'dropzone',
        'dragula',
        'filepond',
        'filepond-plugin-file-validate-size',
        'filepond-plugin-file-validate-type',
        'filepond-plugin-image-exif-orientation',
        'filepond-plugin-image-crop',
        'filepond-plugin-image-edit',
        'filepond-plugin-image-preview',
        'filepond-plugin-image-resize',
        'filepond-plugin-image-transform',
        'imask',
        'nprogress',
        'notyf',
        'mapbox-gl',
        'photoswipe/dist/photoswipe',
        'photoswipe/dist/photoswipe-ui-default',
        'plyr',
        'v-calendar',
        'vee-validate',
        'vue',
        'vue-scrollto',
        'vue3-apexcharts',
        'vue-tippy',
        'simplebar',
        'simple-datatables',
        'tiny-slider/src/tiny-slider',
        'vue-accessible-color-picker',
        'yup',
        'ant-design-vue',
        'vant'
      ],
    },
    // Will be passed to @rollup/plugin-alias as its entries option.
    resolve: {
      alias: [
        {
          find: '/~/',
          replacement: `/src/assets/`,
        },
        {
          find: '/@src/',
          replacement: `/src/`,
        },
      ],
    },
  
    build: {
      sourcemap: SOURCE_MAP,
      // Turning off brotliSize display can slightly reduce packaging time
      brotliSize: !SILENT,
      chunkSizeWarningLimit: 2000,
      minify: 'esbuild',
      cssCodeSplit: true,
    },
    plugins: [
      /**
       * plugin-vue plugin inject vue library and allow sfc files to work (*.vue)
       *
       * @see https://github.com/vitejs/vite/tree/main/packages/plugin-vue
       */
      Vue({
        include: [/\.vue$/],
      }),
  
      /**
       * vite-plugin-vue-i18n plugin does i18n resources pre-compilation / optimizations
       *
       * @see https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
       */
      vueI18n({
        include: path.resolve(__dirname, './src/locales/**'),
      }),
  
      /**
       * unplugin-vue-components plugin is responsible of autoloading components
       * documentation and md file are loaded for elements and components sections
       *
       * @see https://github.com/antfu/unplugin-vue-components
       */
      Components({
        dirs: ['src/components', 'src/layouts', 'src/views'],
        extensions: ['vue', 'md'],
        dts: true,
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          AntDesignVueResolver(),
          VantResolver()
        ]
      }),
  
      /**
       * vite-plugin-purge-icons plugin is responsible of autoloading icones from multiples providers
       *
       * @see https://icones.netlify.app/
       * @see https://github.com/antfu/purge-icons/tree/main/packages/vite-plugin-purge-icons
       */
      PurgeIcons(),
  
      /**
       * vite-plugin-fonts plugin inject webfonts from differents providers
       *
       * @see https://github.com/stafyniaksacha/vite-plugin-fonts
       */
      ViteFonts({
        google: {
          families: [
            {
              name: 'Fira Code',
              styles: 'wght@400;600',
            },
            {
              name: 'Montserrat',
              styles: 'wght@500;600;700;800;900',
            },
            {
              name: 'Roboto',
              styles: 'wght@300;400;500;600;700',
            },
          ],
        },
      }),
  
      /**
       * vite-plugin-radar plugin inject snippets from analytics providers
       *
       * @see https://github.com/stafyniaksacha/vite-plugin-radar
       */
      ViteRadar({
        analytics: {
          id: '',
        },
      }),
  
      /**
       * vite-plugin-pwa generate manifest.json and register services worker to enable PWA
       *
       * @see https://github.com/antfu/vite-plugin-pwa
       */
      VitePWA({
        registerType: 'autoUpdate',
        base: '/',
        includeAssets: [
          'favicon.svg',
          'favicon.ico',
          'robots.txt',
          'apple-touch-icon.png',
        ],
        manifest: {
          name: 'Treebū Admin',
          short_name: 'Treebū Admin',
          start_url: '/?utm_source=pwa',
          display: 'standalone',
          theme_color: '#ffffff',
          background_color: '#ffffff',
          icons: [
            {
              src: 'pwa-192x192.png',
              sizes: '192x192',
              type: 'image/png',
            },
            {
              src: 'pwa-512x512.png',
              sizes: '512x512',
              type: 'image/png',
            },
            {
              src: 'pwa-512x512.png',
              sizes: '512x512',
              type: 'image/png',
              purpose: 'any maskable',
            },
          ],
        },
      }),
  
      /**
       * rollup-plugin-purgecss plugin is responsible of purging css rules
       * that are not used in the bundle
       *
       * @see https://github.com/FullHuman/purgecss/tree/main/packages/rollup-plugin-purgecss
       */
      purgecss({
        content: [`./src/**/*.vue`],
        variables: false,
        safelist: {
          standard: [
            /(autv|lnil|lnir|fas?)/,
            /-(leave|enter|appear)(|-(to|from|active))$/,
            /^(?!(|.*?:)cursor-move).+-move$/,
            /^router-link(|-exact)-active$/,
            /data-v-.*/,
          ],
        },
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /&lt;style[^]+?&lt;\/style&gt;/gi,
            ''
          )
          return (
            contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) ||
            []
          )
        },
      }),
  
      /**
       * vite-imagetools plugin allow to perform transformation (blur, resize, crop, etc)
       * on images at build time
       *
       * @see https://github.com/JonasKruckenberg/vite-imagetools
       */
      imagetools({
        silent: SILENT,
      }),
  
      /**
       * vite-plugin-imagemin optimize all images sizes from public or asset folder
       *
       * @see https://github.com/anncwb/vite-plugin-imagemin
       */
      ImageMin({
        verbose: !SILENT,
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 60,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
              active: false,
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),
    ],
  })
  </code></pre>
  <p>This is my index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;!--iOS configuration--&gt;
      &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
  
      &lt;meta name=&quot;google&quot; content=&quot;notranslate&quot;&gt;
  
      &lt;!--ICONS--&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/images/mobile-icons/ios/apple-icon.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;57x57&quot; href=&quot;/images/mobile-icons/ios/apple-icon-57x57.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;60x60&quot; href=&quot;/images/mobile-icons/ios/apple-icon-60x60.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;/images/mobile-icons/ios/apple-icon-72x72.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;/images/mobile-icons/ios/apple-icon-76x76.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;/images/mobile-icons/ios/apple-icon-114x114.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;120x120&quot; href=&quot;/images/mobile-icons/ios/apple-icon-120x120.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;144x144&quot; href=&quot;/images/mobile-icons/ios/apple-icon-144x144.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;152x152&quot; href=&quot;/images/mobile-icons/ios/apple-icon-152x152.png&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/images/mobile-icons/ios/apple-icon-180x180.png&quot;&gt;
  
      &lt;!--    Splashscreen--&gt;
      &lt;link href=&quot;/images/splashscreens/iphone5_splash.png&quot; media=&quot;(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/iphone6_splash.png&quot; media=&quot;(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/iphoneplus_splash.png&quot; media=&quot;(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/iphonex_splash.png&quot; media=&quot;(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/iphonexr_splash.png&quot; media=&quot;(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/iphonexsmax_splash.png&quot; media=&quot;(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/ipad_splash.png&quot; media=&quot;(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/ipadpro1_splash.png&quot; media=&quot;(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/ipadpro3_splash.png&quot; media=&quot;(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
      &lt;link href=&quot;/images/splashscreens/ipadpro2_splash.png&quot; media=&quot;(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)&quot; rel=&quot;apple-touch-startup-image&quot; /&gt;
  
      &lt;!--Status Bar--&gt;
      &lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black-translucent&quot;&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#2f3048&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;
      &lt;meta content=&quot;initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no, shrink-to-fit=no&quot; name=&quot;viewport&quot;&gt;
      &lt;link
        rel=&quot;apple-toucv-icon&quot;
        sizes=&quot;180x180&quot;
        href=&quot;/icons/apple-touch-icon.png&quot;
      /&gt;
      &lt;link
        rel=&quot;icon&quot;
        type=&quot;image/png&quot;
        sizes=&quot;32x32&quot;
        href=&quot;/icons/favicon-32x32.png&quot;
      /&gt;
      &lt;link
        rel=&quot;icon&quot;
        type=&quot;image/png&quot;
        sizes=&quot;16x16&quot;
        href=&quot;/icons/favicon-16x16.png&quot;
      /&gt;
      &lt;link rel=&quot;mask-icon&quot; href=&quot;/icons/safari-pinned-tab.svg&quot; color=&quot;#5bbad5&quot; /&gt;
      &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#232326&quot; /&gt;
      &lt;!--    &lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot; /&gt;--&gt;
      &lt;title&gt;Treebū Hotels&lt;/title&gt;
      &lt;script&gt;
        /**
         * this is a hack for dragula used on KanbanApp
         *
         * @see src/components/pages/apps/KanbanApp.vue
         */
        var global = global || window
      &lt;/script&gt;
      &lt;link
        rel=&quot;preload&quot;
        as=&quot;style&quot;
        onload=&quot;this.rel='stylesheet'&quot;
        href=&quot;/vendors/font-awesome-v5.css&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        as=&quot;style&quot;
        onload=&quot;this.rel='stylesheet'&quot;
        href=&quot;/vendors/line-icons-pro.css&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        as=&quot;style&quot;
        onload=&quot;this.rel='stylesheet'&quot;
        href=&quot;/vendors/prism-coldark-cold.css&quot;
      /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div data-teleport-bg&gt;&lt;/div&gt;
      &lt;div id=&quot;app&quot; class=&quot;app-wrapper&quot;&gt;&lt;/div&gt;
      &lt;script type=&quot;module&quot; src=&quot;/src/styles.ts&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;module&quot; src=&quot;/src/main.ts&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Please note the differences in the following images between the dev version and the production version:</p>
  <p>Dev Version:</p>
  <p><a href="https://i.stack.imgur.com/k4pDR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k4pDR.png" alt="Dev version" /></a></p>
  <p>Prod Version:
  <a href="https://i.stack.imgur.com/wD3CT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wD3CT.png" alt="Prod version" /></a></p>
  <p>As you can see there is a mismatch in styles... lets continue:</p>
  <p>Dev version, flexbox working correctly:
  <a href="https://i.stack.imgur.com/dPLAy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dPLAy.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/4vpYT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4vpYT.png" alt="enter image description here" /></a></p>
  <p>No flexbox in prod version
  <a href="https://i.stack.imgur.com/d9uXs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d9uXs.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/QAMzV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QAMzV.png" alt="enter image description here" /></a></p>
  <p>There are no warnings or errors on console on the build version,</p>
  <p>I have tried removing antd, vant, and other custom css styles, just in case there is some conflict, but I get the same result, also tried with</p>
  <p>minify: 'esbuild', // or false</p>
  <p>cssCodeSplit: true, //or false</p>
  <p>In the vite.config</p>
  <p>Everything works perfectly on development but it's just messed up on build.</p>
  <p>Any hints? ideas? possibilities? chances?</p>
  <p>Thanks in advance!.</p>