CODEWITHSUNDEEP
vue.jsvuetify.jsvue-cliquasar-framework
alvin_nt
alvin_nt

Reputation: 23

Mixed-up CSS on Production Build of vue-cli

I have an issue in which the production build, which is created by npm run build differs from the development build, which is provided by npm run serve. The generated CSS on production differs from CSS on development.

Background

Due to changes in standard, some part of an existing application that was developed using Vuetify framework needs to be migrated to Quasar. Vuetify was installed first using vue-cli. Quasar was added later using npm. Application is in multi-page mode.

Problem

When viewing the page through npm run serve, pages that have been migrated to Quasar is shown correctly. However, when trying to deploy it in production through npm run build, the same page breaks. All spacing and margin in the page is off. After inspecting the resulting CSS, it turns out some CSS class is overriden to Vuetify's values.

I have tried to split the chunk for each page, to no avail.

The following is the snippet of my vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : '/',
  outputDir: '../flask/web/static/dist',

  transpileDependencies: ['quasar', 'vuetify'],

  pages: {
    dashboard: { // vuetify page, no problem.
      entry: 'src/pages/dashboard/index.js',
      template: 'public/index.html',
      filename: 'dashboard.html',
      title: 'Dashboard',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-dashboard-vendors', 'dashboard']
    },
    page2: { // quasar page, the one with problem
      entry: 'src/pages/page2/index.js',
      template: 'public/quasar.html',
      filename: 'page2.html',
      title: 'Page2',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-page2-vendors', 'page2']
    },
    page3: {
      entry: 'src/pages/page3/index.js',
      template: 'public/index.html',
      filename: 'page3.html',
      title: 'Page3',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-page3-vendors', 'page3']
    },
    // other page definitions...
  },

  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  chainWebpack: config => {
    const options = module.exports
    const pages = options.pages
    const pageKeys = Object.keys(pages)

    // Long-term caching

    const IS_VENDOR = /[\\/]node_modules[\\/]/
    config.optimization
      .splitChunks({
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            priority: -10,
            chunks: 'initial',
            minChunks: 2,
            test: IS_VENDOR,
            enforce: true
          },
          ...pageKeys.map(key => ({
            name: `chunk-${key}-vendors`,
            priority: -11,
            chunks: chunk => chunk.name === key,
            test: IS_VENDOR,
            enforce: true
          })),
          common: {
            name: 'chunk-common',
            priority: -20,
            chunks: 'initial',
            minChunks: 2,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
  }
}

The following are snippets from each of the page's entry file.

src/pages/page2/index.js

import Vue from 'vue'
import Page2 from './Page2.vue'
import '@/plugins/quasar'

Vue.config.productionTip = false

new Vue({
  render: h => h(Page2)
}).$mount('#app')

src/plugins/quasar.js

import Vue from 'vue'

import '@/styles/quasar.scss'
import iconSet from 'quasar/icon-set/mdi-v5.js'
import '@quasar/extras/mdi-v5/mdi-v5.css'
import { Quasar, Notify } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: {},
  directives: {},
  plugins: {
    Notify
  },
  iconSet: iconSet
})

src/page3/index.js

import Vue from 'vue'
import Page3 from './Page3.vue'
import vuetify from '@/plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(Page3)
}).$mount('#app')

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
})

Any idea how to split the code properly between different pages, both in production and development build, so that the CSS does not override each other?

Upvotes: 1

Views: 2459

Answers (1)

dhertzb
dhertzb

Reputation: 143

What solved my problem was adding:

css:{
  extract:false  
}

To the vue.config.js file in root directory

Upvotes: 12

Related Questions