CODEWITHSUNDEEP
javascriptvue.jsvue-multiselect
kodfire
kodfire

Reputation: 1783

vue-multiselect styles working in dev but not in prod

I have added <style src="vue-multiselect/dist/vue-multiselect.min.css"> to my vue component, its styles working when running npm run dev but not when running npm run prod. How to fix that?

<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>

Upvotes: 2

Views: 3037

Answers (2)

Naveenraj
Naveenraj

Reputation: 1

Download the file from the link

https://github.com/shentao/vue-multiselect/blob/19276edf5283b25c9e847c9552fe29ff5bdbd98e/dist/vue-multiselect.min.css

Save the file in public/assets/css (as per your wish)

import in your component like this

@import '../../../../public/assets/css/vue-multiselect.min.css'; (as per saved path)

Upvotes: 0

StevenSiebert
StevenSiebert

Reputation: 1426

The problem is, that you using a relative path. What you need is to add a ref to your src folder, to tell vue-cli, that you want to include it in your production build.

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

The @ refers your src path. Where you store it or what you call your folders is up to you.

EDIT: Another approach could be to reinstall the package with this command:

npm install vue-multiselect@next --save

Or just import it like you do with the component:

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

EDIT 2: vue.config.js, create this file in your root. The content should be:

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

Upvotes: 0

Related Questions