Question

我在使用自定义主题时遇到问题。我正在使用Spring Boot + Vaadin 8和IntelliJ Idea + Gradle。我创建了一个文件：src/main/webapp/VAADIN/themes/mytheme/styles.css

@import "../valo/styles.css";
.my-split { background: #a983ff; }

我已将@Theme("mytheme")添加到我的UI类。

我在我的组件上设置了样式名称：gridsSplitPane.addStyleName("my-split");

现在，当我运行我的应用程序时，mytheme似乎已加载，因为背景已正确更改但其他所有内容都没有CSS样式 - 就像导入不起作用一样：@import "../valo/styles.css" < / p>

我在这里缺少什么？

我已经看到一些主题需要以某种方式编译的信息。任何人都可以帮我用Gradle + IntelliJ Idea编译它吗？像我这样的普通css定制是否也需要它？

当我使用@Theme("valo")时 - 所有内容都已正确加载，所以我猜测所有Valo主题文件都是从vaadin-themes-8.1.0.jar!/VAADIN/themes/valo/...

正确加载的

的build.gradle

buildscript {
    ext { springBootVersion = '1.5.6.RELEASE' }
    repositories { mavenCentral() }
    dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") }
}

apply plugin: 'java'
apply plugin: 'org.springframework.boot'

version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories { mavenCentral() }

ext { vaadinVersion = '8.1.0' }

dependencies {
    compile('com.vaadin:vaadin-spring-boot-starter')

    compile("org.springframework.boot:spring-boot-starter-logging")
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

dependencyManagement {
    imports { mavenBom "com.vaadin:vaadin-bom:${vaadinVersion}" }
}

AppMain.java

package example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AppMain {
    public static void main(String[] args) {
        SpringApplication.run(AppMain.class, args);
    }
}

MyUI.java

package example;

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
@SpringUI(path = "/ui")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        Label label = new Label("Customizing theme.");
        label.setStyleName("my-label");

        VerticalLayout root = new VerticalLayout();
        root.addComponent(label);
        root.setSizeFull();
        setContent(root);
    }
}

Answer 1

这是一个快速教程

“如何使用Vaadin 8和SPRING启动应用程序使用自定义主题”

使用Spring BOOT，sbt，SCALA和Vaadin8创建Vaadin应用程序
使用maven archetype

Maven - ＆gt; [x]从原型创建 - ＆gt; com.vaadin：vaadin-archetype-application - ＆gt; vaadin-原型应用：8.0.0

将vaadin自定义主题从maven原型应用程序复制到您的SPRING Vaadin 8应用程序：

复制整个 VAADIN 目录（SRC /主/ web应用/ VAADIN /主题/ mytheme的）

到

的src /主/资源/ VAADIN /主题/ mytheme的

更改

@Theme("mytheme") public class MyUI extends UI { }

[可选]根据您的喜好更改主题名称

重命名：

VAADIN/themes/mytheme/mytheme.scss -> othertheme.scss
VAADIN/themes/mytheme/mytheme.scss -> change mixin name @mixin othertheme { ... }
VAADIN/themes/mytheme/styles.scss -> change @import "othertheme.scss" | .othertheme{} | @include othertheme;

这些截屏视频中的更多信息：

video Vaadin简介 - 您第一次使用Framework 8

video社区答案：在Spring应用程序中创建新的Vaadin主题

Answer 2

你很接近它的工作。要使用自定义SCSS主题，请将以下内容放在styles.scss：

中

@import "../valo/valo";

.mytheme {
    @include valo;
}

与您在评论中提到的内容的基本区别在于将Valo包含在您的主题中。

修改

您最初的问题是关于CSS主题。据我所知，CSS主题不适用于包含Valo，因为大多数样式都以.valo CSS选择器为前缀，切换到自定义主题将添加CSS类mytheme而不是默认{{ 1}}到主div元素。我甚至测试过在最终的HTML（Firefox检查器）中添加valo CSS类，然后按预期显示样式。感觉就像一个Vaadin bug。因此，我建议使用SCSS主题，它们还具有比CSS更多的功能。

Vaadin自定义css - 自定义主题

2 个答案: