更改 Vaadin / Spring-Boot / Maven 中的 css答案

【问题标题】：Change the css in Vaadin / Spring-Boot / Maven更改 Vaadin / Spring-Boot / Maven 中的 css
【发布时间】：2024-05-15 23:40:01
【问题描述】：

我想让我的网站更漂亮，但我不知道该怎么做。该应用程序是使用 Spring-boot 和 Maven 构建的。我使用 Vaadin 构建 UI。我使用 valo 主题。但我想更改颜色、大小、字体等。我想保留默认的 Valo 主题并添加我的变体。我已经看过 vaadin 文档、youtube 网络研讨会和其他类似 this 的页面。但这是不可能的。我应该将 scss 文件放在 valo 文件夹附近的文件夹中。但是 valo 文件夹在 jar 中！我尝试了很多可能性，但我不知道该怎么做。我已将文件夹放在 src/main/webapp/VAADIN/themes/mytheme 中。但它不起作用。我已指定 vaadin 使用该主题。但是，我不知道 Vaadin 如何与 scss 一起工作？有人可以帮助我吗？

【问题讨论】：

文档中 valo 文件夹的位置可能有点误导。只需将您的主题文件夹放入src/main/webapp/VAADIN/themes/yourtheme/。在该文件夹中，您有 styles.scss 和 yourtheme.scss。
别忘了指定 vaadin 来使用你的主题
我已经把文件夹放到这个地方了。但它不起作用。我已经指定 vaadin 使用主题。但是，首先，我不知道 Vaadin 如何与 scss 一起工作？然后，我想保留默认的 Valo 主题并添加我的变体。

标签： css maven spring-boot sass vaadin

【解决方案1】：

我找到了解决方案：

1) 使用新样式的名称创建一个文件夹。

2）在这个文件夹中，创建一个同名的CSS文件（我认为），并编写你要使用的CSS代码。

3) 在 UI 中，插入注释 vaadin ：

@StyleSheet("http://path/to/your/CSS/file.css")

4) 在java代码中，在你想改变的Vaadin Object中，放一个这样的样式名：

// Java
Label label = new Label("Label 1");
label.addStyleName("style-class");

5) 在 CSS 文件中，你必须有一个同名的块！

// CSS
.style-class {
    background-color: red;
}

它工作！

【讨论】：