CODEWITHSUNDEEP
javavaadinvaadin7
LCB2010
LCB2010

Reputation: 100

Error when to compile my theme with vaadin 7.3 and valo theme

I'm developing a vaadin application which used vaadin v7.2. Now it is updated to v7.3.7 and used the new valo theme with my custom styles. When compiling the whole project using mvn clean install the theme getting compile perfectly. But when I try to compile the theme using command prompt with below command

java -cp '../../../../../../target/product-webapp-1.1.3.0-SNAPSHOT/WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css

it pushes a valo not found error like below

java.io.FileNotFoundException: Import '../valo/valo.scss' in '/home/lahirub/Documents/PROJECTS/NewClearProduct/newclear-product-webapp/src/main/webapp/VAADIN/themes/mytheme/styles.scss' could not be found

com.vaadin.sass.internal.parser.ParseException: Mixin Definition: valo not found

My custom theme is like this

mytheme.scss

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
}

styles.scss

@import "mytheme.scss";
@import "addons.scss";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {
  @include addons;
  @include mytheme;

}

addons.scss

/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
}

I'm unable to find the reason for this error. Can anyone please give me some suggestion.

Upvotes: 4

Views: 4537

Answers (2)

hariprasad
hariprasad

Reputation: 585

In mytheme.scss don't forget add @ before mixin clause, otherwise compilation fails. Variant for Liferay to change appearance of TextField:

// Import valo after setting the parameters
@import "../liferay/liferay.scss";
@import "../valo/valo.scss";


@mixin mytheme {
  @include liferay;
  @include valo;

.v-textfield.height-fix {
    height: 35px;
    border-radius: 4px;
  }
}

I copied valo theme directly into my project. The styles.scss should be like this (i.e. exactly same):

@import "addons.scss";
@import "mytheme.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in mytheme.scss */
.mytheme {
    //Your theme's rules go here
  @include addons;
  @include mytheme;
}

For your primary question, why compilation fails on included valo theme I have no simple answer. For Eclipse Mars, Liferay 6.2.4 and Vaadin 7.5 this error (for fresh installation) does not appear. Additionally, direct copy valo theme to actual project for this actual combination is obsolete.

Upvotes: 1

LahiruChathuranga
LahiruChathuranga

Reputation: 237

I just found the solution. Need to replace 

  <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-client-compiled</artifactId>
            <version>${com.vaadin.version}</version>
            <scope>provided</scope>
        </dependency>

with

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiler</artifactId>
    <version>${com.vaadin.version}</version>
    <scope>provided</scope>
</dependency>

in pom.xml for valo custom theme.

Upvotes: 4

Related Questions