Vaadin 自定义 css - 自定义主题答案

【问题标题】：Vaadin custom css - customizing themesVaadin 自定义 css - 自定义主题
【发布时间】：2017-09-12 09:11:30
【问题描述】：

我在使用自定义主题时遇到问题。我正在使用 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"

我在这里错过了什么？

我看到一些信息表明需要以某种方式编译主题。谁能帮我用 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);
    }
}

【问题讨论】：

您是否重新编译了主题？在 IntelliJ 中，打开 Maven 项目面板，打开“Vaadin”并运行“vaadin:compile-theme”。然后再次运行您的项目。
我使用 Gradle 而不是 Maven，找不到任何有用的信息如何使用 Gradle...
我已经用一些可用于重现的示例文件更新了帖子。
我一直在环顾四周，但真的找不到关于如何使用 Gradle 编译主题的明确解决方案。但是，您可以尝试使用命令行解决方案。 Vaadin 官方文档：vaadin.com/docs/-/part/framework/themes/themes-compiling.html
不客气。如果您需要帮助，请针对该问题打开一个新问题。到目前为止，我还没有使用 Vaadin push。

标签： css spring-boot intellij-idea gradle vaadin

【解决方案1】：

这里有一个快速教程

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

使用 Spring BOOT、sbt、SCALA 和 Vaadin8 创建 Vaadin 应用程序
使用 maven 原型创建新的 Vaadin 应用程序

Maven -> [x] 从原型创建 -> com.vaadin:vaadin-archetype-application -> vaadin-archetype-application:8.0.0

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

复制整个 VAADIN 目录 (src/main/webapp/VAADIN/themes/mytheme)

到

src/main/resources/VAADIN/themes/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 主题

【讨论】：

【解决方案2】：

你已经接近让它工作了。要使用自定义 SCSS 主题，请将以下内容放入 styles.scss：

@import "../valo/valo";

.mytheme {
    @include valo;
}

与您在 cmets 中提到的内容的基本区别是在您的主题中包含 Valo 的方式。

编辑

您最初的问题是关于 CSS 主题的。据我所见，CSS 主题不应该与 Valo 一起使用，因为大多数样式都以 .valo CSS 选择器为前缀，切换到您的自定义主题将添加 CSS 类 mytheme 而不是默认的 valo 到主div 元素。我什至测试了在最终的 HTML（Firefox 检查器）中添加 valo CSS 类，然后按预期显示样式。感觉像一个 Vaadin 错误。所以，我推荐使用 SCSS 主题，它也比 CSS 有更多的功能。

【讨论】：