Vaadin SCSS Compilation fails- File to import not found or unreadable: ../valo/valo.scss

Question

I am working on migration from Vaadin 8 to Vaadin 14 LTS in MPR. The .scss files used in our project need to be compiled. I used the following plugins

<plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>8.7.0</version>
        <configuration>
          <!--<style>DETAILED</style> -->
          <!-- End development options -->
          <extraJvmArgs>-Xmx4G</extraJvmArgs>
          <webappDirectory>src/main/webapp/VAADIN/widgetsets</webappDirectory>
          <hostedWebapp>src/main/webapp/VAADIN/widgetsets</hostedWebapp>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>resources</goal>
              <goal>update-widgetset</goal>
              <goal>compile</goal>
              <goal>update-theme</goal>
              <goal>compile-theme</goal>
            </goals>            
          </execution>
        </executions>
      </plugin>     
<plugin>
            <groupId>org.jasig.maven</groupId>
            <artifactId>sass-maven-plugin</artifactId>
            <version>1.1.1</version>
            <executions>
              <execution>
                <phase>prepare-package</phase>
                <goals>
                  <goal>update-stylesheets</goal>
                </goals>
              </execution>
            </executions>
            <configuration>
              <resources>
                <resource>
                  <!-- Set source and destination dirs -->
                  <source>
                    <directory>${basedir}/src/main/webapp/VAADIN/themes/headerTheme/</directory>
                  </source>
                  <destination>${basedir}/target/ui-HEAD/VAADIN/themes/headerTheme/</destination>
                </resource>
              </resources>
            </configuration>
          </plugin>

I get error as below

File to import not found or unreadable: ../valo/valo.scss.

Full error:

Compilation of template C:/LBWS/source/component/frontend/addon/va/ui/src/main/webapp/VAADIN/themes/headerTheme/styles.scss failed: File to import not found or unreadable: ../valo/valo.scss.
Load path: C:/LBWS/source/component/frontend/addon/va/ui/src/main/webapp/VAADIN/themes/headerTheme

From the links below,

https://vaadin.com/docs/v7/framework/themes/themes-compiling

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

Compiling Sass files in NetBeans without Maven - Valo theme not found

I understand the problem, but I already imported the vaadin-themes dependency in my project

    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-themes</artifactId>
      <version>8.14.3</version>
    </dependency>

Still, the problem is not resolved. Any help on this, please.

The UI class built in Vaadin 8 and migrated to 14

import com.google.common.eventbus.EventBus;
import com.vaadin.annotations.Theme;


import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

import com.vaadin.flow.server.VaadinSession;
import com.vaadin.mpr.core.HasLegacyComponents;

import com.vaadin.mpr.core.MprTheme;
import com.vaadin.server.VaadinServlet;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;

@MprTheme("myTheme")
@Route("")
public class MyUI extends VerticalLayout implements HasLegacyComponents {

  private ExceptionManager exceptionManager;


  public MyUI() {
   
    EventBus eventBus = new EventBus();
    VaadinSession.getCurrent().getSession().setAttribute("eventBus", eventBus);

    MyUIPresenter myUIPresenter = new MyUIPresenter (false);

    myUIPresenter .addShortLink("Shortlink");

    myUIPresenter .addTab("Tab1", "");
    myUIPresenter .addTab("Tab2", "");
    myUIPresenter .addTab("Tab3", "");

    List<HeaderMenuItem> leftMenuContent = new ArrayList<>();
    leftMenuContent.add(new ExampleToggleButton());
    leftMenuContent.add(new ExampleSimpleButton());
    leftMenuContent.add(new ExampleHeaderCheckBox());
    myUIPresenter .addLeftMenuContent(leftMenuContent);

    TextField testField = new TextField();
    testField.setLabel("This is Vaadin 14 Component");
    add(myUIPresenter .getView());
    setSizeFull();
    add(testField);
  }

myTheme

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

@mixin myTheme{
  @include valo;
  @include header;

}

Answer 1

Couple of notes for you

• SASS compiler is not needed in pom.xml, Vaadin 8 framework itself contains SASS compiler, which is invoked by the vaadin-flow-plugin

• You need to have vaadin-themes depedency

  com.vaadin vaadin-themes ${vaadin8.version}

• Both vaadin-maven-plugin and vaadin-flow-plugin needs to be correctly configured

• A good reference pom.xml can be found here:

https://github.com/TatuLund/mpr-demo/blob/mpr-4/pom.xml