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>

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

UI class 内置于 Vaadin 8 并迁移到 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);
  }

我的主题

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

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

}

Answer 1

给你的几个注意事项

SASS 编译器在 pom.xml 中不需要，Vaadin 8 框架本身包含 SASS 编译器，由 vaadin-流插件
你需要有 vaadin-themes depedency
com.vaadin vaadin主题 ${vaadin8.version}
vaadin-maven-plugin和vaadin-flow-plugin都需要正确配置
可以在此处找到很好的参考 pom.xml：

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

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

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

vaadin

vaadin8

vaadin14

vaadin-valo-theme