Vaadin SCSS 编译失败 - 找不到要导入的文件或无法读取 : . ./valo/valo.scss

Question

我正在 MPR 中从 Vaadin 8 迁移到 Vaadin 14 LTS。我们项目中使用的 .scss 文件需要编译。我使用了以下插件

<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>

我得到如下错误

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

完整错误:

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

从下面的链接，

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

我明白这个问题，但我已经导入了 vaadin-themes 依赖项 在我的项目中

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

问题还是没有解决。请提供任何帮助。

在 Vaadin 8 中构建并迁移到 14 的 UI 类

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);
  }

我的主题

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

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

}

Answer 1

给你的几个笔记

• pom.xml中不需要SASS编译器，Vaadin 8框架本身包含SASS编译器，由vaadin-flow-plugin

  调用

• 你需要有vaadin-themes依赖

  com.vaadin vaadin主题 ${vaadin8.version}

• vaadin-maven-plugin 和 vaadin-flow-plugin 都需要正确配置

• 可以在这里找到一个很好的引用 pom.xml:

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