Migrating Views & CSS from Vaadin 8 Bakery Demo To Vaadin 14

Flow
1

Hi Guys,

We have a project that is based on Vaadin 8 Bakery Demo that we are upgrading to Vaadin 14 to take advantage of offline views.

I am in the process of updating the old Vaadin 8 Designer files to new platform views.

I’ve got the frontend folder and npm built, so now when I copy in the old HTML structure into the Polymer 3 template files and they show up in the designer OK, but they are not styled correctly (Vaadin Bakery Demo is heavily CSS layouted for CRUD views).

Is there a way I can pull in that CSS file to the new polymer views?
When I do an import ‘./styles.css’ the view fails to render anything at all.
My styles.css is in /frontend/styles.css

Any help would be appreciated.

Thanks
~Ben

2

Hi,
you may not use plain css files in @JsModule imports.
All imports should be js modules : so they should be JS files.
You should either convert your css into a JS module file (see https://github.com/vaadin/flow-and-components-documentation/blob/master/documentation/importing-dependencies/tutorial-include-css.asciidoc#using-javascript-template) or use CssImport
(see https://github.com/vaadin/flow-and-components-documentation/blob/master/documentation/importing-dependencies/tutorial-include-css.asciidoc#using-cssimport).