How to create new theme in Vaadin Project – Eclipse Mars?

Anih Agah! (bidayuh sentence for greeting)

About theme – SASS in Vaadin:

  • Custom themes are placed under (src/main/webapp – vaadin/themes/ ).
  • location is Fixed.
  • The Vaadin Folder contains static resources that are served by the vaadin servlet.
  • The Built-in themes are stored in vaadin-themes.jar.
  • The name of theme folder defines the name of the theme.
  • A theme must contain style.scss for sass or style.scss.
  • Sass can be use in vaadin by two ways:
    •  Compiling by yourself.
    • Letting the vaadin servlet to compile them for you on-the-fly when the theme is requested by browser.
  • The vaadin.com state that we must define sass theme with the name mytheme.
    • – Folder theme = vaadin/themes/mytheme.

1.) How to create new theme in Vaadin Project – Eclipse Mars?

-. Right Click project, create new Vaadin Theme.

vaadin_theme_1.jpg

-. My new theme is – mytheme.

-. The Result is like below, created 3 files automatically:

vaadin_theme_2.jpg

2.) steps 1, How to make associated the file type .scss with eclipses native CSS Editor ?

-.  Go to Window > Preferences

-. Go down to General > Editors > File Associations

-. In File Associations pane, click the ‘Add…” button on the top right.

-. For File Type:, enter *.scss and then click OK.

 

add_sass_extension_eclipse.jpg

-. Find the *.scss entry in the File Associations list and select it.

-. After selecting *.scss, on the bottom pane Associated editors:, click the Add… button.

add_sass_extension_eclipse_2.jpg

 -. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

2.1) steps 2, How to Add the .scss file type to the native CSS Editor 

-. Go to Window > Preferences

-. Go down to General > Content Types

-. In the Content Types pane, expand Text, then select CSS.

-. After CSS is selected, on the bottom File associations: pane, click the Add… button.

add_sass_extension_eclipse_3.jpg

-. For Content type:, enter *.scss and then click OK.

-. Click OK to close out the Preferences window.

-. To Check result, right click file .scss , then the code in scss will have fancy syntax.

fancy_scss.jpg

3. Errors and Solutions:

3.1. Compile using mvn package command – Maven, got errors –Mixin Definition: mytheme not found, commpiling theme failed“.

  • Solutions :
  • add the “org.eclipse.wst.common.component” in your project folder – .settings.
  •  set this – if using webapp/ –  <wb-resource deploy-path=”/” source-path=”/src/main/webapp” tag=”defaultRootSource“/>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s