CODEWITHSUNDEEP
vue.jswebpacksassvuetify.jsvuetify-loader
Lucas Pagliari
Lucas Pagliari

Reputation: 31

Conflict order when compiling Vue project

I'm currently having problem compiling my project, already tried this solution, but when i deploy my application my toolbar and some other components just lost their base style. My current package.json.

  "dependencies": {
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "coordinates-converter": "0.0.2",
    "core-js": "^2.6.11",
    "css-loader": "^3.6.0",
    "d3": "^5.16.0",
    "jquery": "^2.2.4",
    "justgage": "^1.4.0",
    "konva": "^7.1.3",
    "lodash": "^4.17.20",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.29.1",
    "portfinder": "^1.0.28",
    "register-service-worker": "^1.6.2",
    "sass": "^1.26.12",
    "serve": "^11.3.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.12",
    "vue-konva": "^2.1.6",
    "vue-material-design-icons": "^4.9.0",
    "vue-morris": "^1.0.1",
    "vue-mqtt": "^2.0.3",
    "vue-router": "^3.4.6",
    "vue-speedometer": "^1.7.0",
    "vuetify": "^2.3.13",
    "vuetify-loader": "^1.6.0",
    "vuex": "^3.5.1",
    "xlsx": "^0.15.1"
  },

I'm getting these warnings

warning
chunk chunk-37cf0e67 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VDivider/VDivider.sass
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VCard/VCard.sass
   - couldn't fulfill desired order of chunk group(s) , , , , , , , , ,
 * css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VChip/VChip.sass
   - couldn't fulfill desired order of chunk group(s) , , , , , ,
   - while fulfilling desired order of chunk group(s) , , ,

...

Upvotes: 3

Views: 3010

Answers (1)

Zihua Lin
Zihua Lin

Reputation: 71

I'm already fixed this problem by modify my vuetify.js.

Before

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import './theme.css';
import zhHans from 'vuetify/es5/locale/zh-Hans';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#7fffff',
        secondary: '#b0b0b0',
        accent: '#82B1FF',
        error: '#ffb0b0',
        info: '#2196F3',
        success: '#77f97c',
        warning: '#FFC107',
      },
    },
  },
  lang: {
    locales: { zhHans },
    current: 'zhHans',
  },
});

After

import './theme.css';
import zhHans from 'vuetify/es5/locale/zh-Hans';
import Vue from 'vue'
import Vuetify, {
  VApp,
  VToolbar,
  VCard,
  VBtn,
  VIcon,
  VProgressCircular,
  VList,
  VAvatar,
  VListGroup,
} from 'vuetify/lib';
import {
  Ripple
} from 'vuetify/lib/directives';

Vue.use(Vuetify, {
  components: {
    VApp,
    VToolbar,
    VCard,
    VBtn,
    VProgressCircular,
    VList,
    VListGroup,
    VAvatar,
    VIcon,
  },
  directives: {
    Ripple,
  },
})

const opts = {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#7fffff',
        secondary: '#b0b0b0',
        accent: '#82B1FF',
        error: '#ffb0b0',
        info: '#2196F3',
        success: '#77f97c',
        warning: '#FFC107',
      },
    },
  },
  lang: {
    locales: { zhHans },
    current: 'zhHans',
  },
}

export default new Vuetify(opts)

This problem will gone if you pre-define the order.

Upvotes: 7

Related Questions