生产环境构建时Vuetify CSS丢失问题排查求助

Hey there, let's break down why your Vuetify styles are vanishing in production while working fine in development—here are the key fixes to get things back on track:

1. Fix Duplicate Vuetify Registration in main.js #

Looking at your main.js, you're importing and registering Vuetify twice, which can cause conflicts with style injection:

// Remove these two lines—you already have a configured vuetify instance from ./plugins/vuetify
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)

The vuetify instance imported from ./plugins/vuetify already handles proper registration and style setup (thanks to the vue-cli-plugin-vuetify), so duplicating this step disrupts the style pipeline.

2. Configure PurgeCSS to Preserve Vuetify Styles #

Your package.json includes @fullhuman/postcss-purgecss, which aggressively removes unused CSS in production. The problem? Vuetify uses dynamic class names that PurgeCSS can't detect by default, so it deletes them by mistake.

Create or update your postcss.config.js to whitelist Vuetify's classes:

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Scan all your Vue/JS files + Vuetify's core files to detect used classes
  content: [
    './src/**/*.vue',
    './src/**/*.js',
    './node_modules/vuetify/dist/vuetify.js'
  ],
  // Use a more flexible extractor to catch Vuetify's dynamic class patterns
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  // Whitelist Vuetify's core class prefixes to ensure they're never removed
  whitelistPatterns: [/^v-/, /^theme--/]
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    // Only apply PurgeCSS in production
    ...process.env.NODE_ENV === 'production' ? [purgecss] : []
  ]
}

3. Verify Vuetify Plugin Configuration #

Double-check your src/plugins/vuetify.js to ensure it's properly importing Vuetify styles:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// Make sure this line exists to import Vuetify's base styles
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  // Add your theme/custom config here
})

4. Test the Build #

Run npm run build again, then inspect the generated dist/css folder—you should now see Vuetify's styles included in the production CSS bundle.

If you still run into issues, you can also try updating sass-loader to a version compatible with Vuetify 2.4.0 (v8.x or v9.x works well with Vue CLI 3.x).

内容的提问来源于stack exchange，提问作者Alexandru Contes