2

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>
Improve this question
2
  • did you try importing globally in main.js? Commented Aug 28, 2021 at 8:44
  • Yes, same result. Commented Aug 28, 2021 at 9:35

2 Answers 2

Reset to default
0

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: './'
    };
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I had done this too but didn't work. In the vue-multiselect documentation, it says it should be like the one I have set. I'm using PHPStorm, so when there is a path like that, it will show it in the suggestion popup. So I'm sure that it's the correct path.
@kodfire Are you using .env files?
Yes, is the problem originated from .env file? In the .env file I just have the variables for my back-end. @Fabalance
@kodfire Only, if you have set up different paths and use them. Another problem could be in the webpack config.
I found it :)) instead of whitelistPatterns: [/multiselect/, /modal/] In newer version, I should have used safelist: [/multiselect/, /modal/]. This will exclude these styles in order not to be purged.
|
0

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)
Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.