css file not loading from .vue file

[danMoses10]

my single file component contains the vue-hotel-datepicker, I can initialise the datepicker, but the css doesn't take effect.

html:

<vue-hotel-datepicker>
</vue-hotel-datepicker>

<script>
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css'; ------------
import VueHotelDatepicker from 'vue-hotel-datepicker' --------------

export default {
  components: {
    'vue-hotel-datepicker': VueHotelDatepicker,
    'add-guests-picker': AddGuestsPicker,
    'month-picker': VueMonthlyPicker,
}}
</script>

**Expected behavior: datepicker to load with css styling

Actual behavior:datepicker loads with no styling

Datepicker Version: ^4.0.0-beta.9

<vue-hotel-datepicker>
</vue-hotel-datepicker>

<script>
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';
import VueHotelDatepicker from 'vue-hotel-datepicker'

export default {
  components: {
    'vue-hotel-datepicker': VueHotelDatepicker,
    'add-guests-picker': AddGuestsPicker,
    'month-picker': VueMonthlyPicker
}}
</script>

[matiasperrone]

@danMoses10 Hi, seems that your HTML is a little bit off.

Try this out:

<template>
    <vue-hotel-datepicker style="max-width: 400px;" />
</template>

<script>
import "vue-hotel-datepicker/dist/vueHotelDatepicker.css";
import VueHotelDatepicker from "vue-hotel-datepicker";

export default {
  name: "App",
  components: {
    VueHotelDatepicker
  }
};
</script>

[danMoses10]

Hi, I have tried this but it is still not loading the css, I am having to copy the scss files to my local folder for it to work, which I would rather not do @matiasperrone

[superbiche]

@danMoses10 please provide a tarball or codesandbox of your reproducible issue and I'll have a look into it.

[danMoses10]

@superbiche it's ok man thanks, I moved onto a different datepicker

[matiasperrone]

@danMoses10 may you anyway provide us anyway with your example, to look for clues? maybe there are others with the same issue.

[mariusa]

Since no followup, I guess this can be closed. This works for me:

import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css'

[Merton]

This work around of importing the CSS directly works, but is there clarity on why this happens? Without the CSS import all the functionality / logic works but simply no styling. For context I am using Nuxt.js (v2.14.6), and importing it the standard way as per your documentation.

Cheers

[matiasperrone]

This is not a workaround, is the best way that you may restyle it without interference.