Custom theme problem related to css linking


I’m quite new with Vaadin and I’ve had problems creating my own custom theme where I could edit the layout of the panels and grids. I’ve created in folder rpgtheme1(which is located in RPG\WebContent\VAADIN\themes) two files rpgtheme1.scss and styles.scss.

The rpgtheme1.scss is as follow:

/* Import the reindeer theme.*/
/* This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import "../reindeer/reindeer.scss";

/* This contains all of your theme.*/
/* If somebody wants to extend the theme she will include this mixin. */
@mixin rpgtheme1 {
  /* Include all the styles from the reindeer theme */
  @include reindeer;

  /* Insert your theme rules here */
    background-color: green; 
    color: yellow;

and styles.scss:

@import "rpgtheme1.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in rpgtheme1.scss */
.rpgtheme1 {
  @include rpgtheme1;

I want to edit the panel layout but something is wrong with bindings to the .scss files and that’s why I’m asking from here.
I have added the @Theme(“rpgtheme1”) notation in the beginning of my code.