Vue Multiselect has different styles in development environment compared to production environment

Question

Vue Multiselect has different styles in development environment compared to production environment

After including

<style src="vue-multiselect/dist/vue-multiselect.min.css">

in my Vue component, I noticed that the styles are applied when running npm run dev, but not when running npm run prod. How can I resolve this issue?

<template>
    <multi-select :id="id" v-model="value" :options="options" :multiple="multiple" :max="max"></multi-select>
</template>

<script>
    import multiSelect from 'vue-multiselect';
    export default {
        name: "my-multi-select",
        components: { multiSelect },
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

javascript vue.js vue-multiselect

Answer 1

Answer №1

The issue at hand is related to the use of a relative path. To resolve this, you must add a reference to your src folder in order to instruct vue-cli to include it in the production build.

<style>
  @import './assets/styles/vue-multiselect.min.css';
</style>

In this context, the @ symbol signifies the src path. The organization and naming conventions within your folders are at your discretion.

UPDATE: An alternative approach would involve reinstalling the package using the following command:

npm install vue-multiselect@next --save

You could also import the package similarly to how you import the component:

import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

UPDATE 2: Create a vue.config.js file in the root directory with the following contents:

module.exports = {
        publicPath: './'
    };

Answer 2

The issue at hand is related to the use of a relative path. To resolve this, you must add a reference to your src folder in order to instruct vue-cli to include it in the production build.

<style>
  @import './assets/styles/vue-multiselect.min.css';
</style>

In this context, the @ symbol signifies the src path. The organization and naming conventions within your folders are at your discretion.

UPDATE: An alternative approach would involve reinstalling the package using the following command:

npm install vue-multiselect@next --save

You could also import the package similarly to how you import the component:

import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

UPDATE 2: Create a vue.config.js file in the root directory with the following contents:

module.exports = {
        publicPath: './'
    };

Vue Multiselect has different styles in development environment compared to production environment

Answer №1

Similar questions

Could this be a problem with synchronization? Utilizing Google Translate to link-translate terms

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

A guide on sorting JSON data with Javascript/jquery

What's the best way to link two http requests in AngularJS?

Firestore's get document method may cause an unmounted warning

Ways to utilize a singular pathway in various situations?

Vuejs application is not producing the anticipated outcome when an ordered list contains an unordered list

Adjust the minimum height and width when resizing the window

in Vue.js, extract the style of an element and apply it to a different element

Vue.js - sortable table with search functionality and image display

JavaScript nested function that returns the ID of the first div element only upon being clicked

Show a row of pictures with overflow capabilities

Combining JavaScript objects with matching keys and values into an array

Global jQuery variables are unexpectedly coming back as "undefined" despite being declared globally

JavaScript is utilized to implement the k-means clustering algorithm, which demonstrates convergence yet lacks stability in its

Getting the response data from an XMLHttpRequest - Full guide with screenshots

Encountered an issue while implementing the post function in the REST API

What could be causing the "10 $digest error" to appear in my code?

Interactive HTML button capable of triggering dual functionalities

Customize the data attributes of Vuetify v-select options for added functionality