The CSS is missing / bundler is not working after upgrade to v1.0.0+

[phoenixwong]

NOTES FROM THE CONTRIBUTOR

For anyone who met bundling issues after upgrading from v0.x to v1.0.0+

Please note that there's a breaking change in v1.0.0 -- the default import source in v1.0.0+ is different from the v0.x versions.

In the v0.x versions, we pointed the main source to the single component file (*.vue) with embedded CSS.

From v1.0.0 on, the main source is a *.js file in UMD form. You need to import the CSS separately.

// v1.0.0+
//
import VueTimepicker from 'vue2-timepicker'
// -> Imports JS file in UMD form

// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'

Why these changes?

There are various kinds of bundlers in the field: Webpack, Parcel, Browserify, Rollup,... Moreover, each has multiple versions: Webpack 1-4, Parcel 1-2,...

From the past bug reports (e.g., #71), I noticed that in some bundlers, the loaders (either vue-loader, vue-style-loader, or css-loader) intend to exclude files from node_modules by default, unless you add some workarounds in the bundler's config.

To make things easier for the majority, kick *.vue out of the default source and divide it into individual CSS and JS file is a better choice.

Please check the Documentation for more available import formats. Choose whatever works best in your circumstances.

Happy coding! : )

[hybridwebdev]

Not sure why this is closed, as this is still an issue. Importing css either separately, or importing the SFC results in css not being applied in built bundler.

For now I just manually pull the css in on my page, but that's hardly a viable solution. If you're going to provide public software, please be responsible and ensure it actually works.