Theme includes stylesheet twice, other parent theme issues

Version: Oxygen.1 Release (4.7.1)
Build id: 20170914-1200

Tomcat 8.5

Vaadin 8.1.5
Widgetset 8.1.0

There are 3 parts to my theme issues.

I have a parent theme that I’d like to share between two projects… So I have three projects setup, and in the “parent” project that is depeneded on by the child projects, I created a theme. Weird thing is that I had to create the theme in src/main/java/VAADIN/themes/ instead of src/main/webapp/VAADIN/themes, like I did with the child projects. Does anybody know why this is? If I put it in webapp folder, compiling the child theme failed because it could not find @import ../parent/parent".

I have theme set to auto compile on save (although this only happens 50% of time at best), but the theme does not auto compile after updating the parent theme.

Also, I am seeing the child theme’s stylesheet being included twice. Notice, they have different versions. This causes weird issues to appear. You can see in attached screenshots.

Not sure if files were attached as they should have been… Can be seen here:

Can somebody please tell me how to prevent this? It is causing many issues and lots of wasted time trying to debug CSS. Thank you.

I have some things that you could look at.

  1. There are two different Vaadin versions lurking there, one for Vaadin theme and one for Vaadin widgetset, 8.1.5 and 8.1.0 respectively. These should always be the same and never differ. I think if you add ?debug to your URL, you will also get a warning of this in your debug window. Usually it means that you have updated the Vaadin version in pom.xml, but you haven’t recompiled the widgetset after that. Recompiling the widgetset should happen automatically on ‘mvn install’ if you haven’t modified that out of your pom.xml. Otherwise you should be able to trigger it with ‘mvn vaadin:update-widgetset’ and ‘mvn vaadin:compile’.

  2. The two <link rel=“stylesheet” …> in your last image definetely looks weird. The first one is as it should be with the relative import to ‘./VAADIN/themes’. It also has the higher version number 8.1.5. The other one is something that should not be there. The second one looks like it shouldn’t be there and it has the old version number after it, which suggest that it might be part of what gets compiled into the widgetset. Do you know that you would be importing the theme from some other place than in your UI class, in the @Theme annotation? Maybe to a project wide search on all references to “remtheme”. Also some code samples on how you include the base theme would be nice to see.

  3. If you use a add-on with styling, let’s say for example Spreadsheet, you add the dependency to your pom.xml The build will trigger the theme update and add spreadsheet css automatically to addons.scss with an import:

/* Provided by vaadin-spreadsheet-2.1.0.alpha1.jar */ @import "../../../VAADIN/addons/spreadsheet/spreadsheet.scss"; Could you maybe use the widget template to provide the base theme? You create a widget project, remove all the server side and client side code, and bring in only the theme this way. It should work.

Hope these help you on the right track to finding out what your problems might be.