更改Vaadin/Spring-Boot/Maven中的CSS

我想讓我的網站更漂亮，但我不知道該怎麼做。該應用程序是使用Spring-Boot和Maven構建的。我用Vaadin構建UI。我使用瓦隆主題。但我想更改顏色，尺寸，字體等。我想保留默認的valo主題並只添加我的變體。我已經看到了vaadin文檔，youtube網絡研討會和其他像this的網頁。但這是不可能的。我應該把scss文件放在靠近valo文件夾的文件夾中。但是valo文件夾在罐子裏！我嘗試了很多可能性，但我不知道該怎麼做。我已將該文件夾放在src/main/webapp/VAADIN/themes/mytheme中。但它不起作用。我已指定vaadin使用主題。但是，我不知道Vaadin如何與scss一起工作？有人可以幫助我嗎？更改Vaadin/Spring-Boot/Maven中的CSS

來源

2017-02-24 ReNaR

文檔中的valo文件夾的位置可能有點誤導。把你的主題文件夾放在'src/main/webapp/VAADIN/themes/yourtheme /'中。在那個文件夾中你有styles.scss和yourtheme.scss。 –

並且不要忘記指定vaadin來使用你的主題 –

我已經把文件夾放在這個地方。但它不起作用。我希望指定vaadin來使用主題。但是，首先，我不知道Vaadin如何與scss合作？然後，我想保留默認的valo主題，並添加我的變體。 – ReNaR

我找到了解決辦法：

1）你的新樣式的名稱創建一個文件夾。

2）在此文件夾中，創建一個具有相同名稱（我認爲）的CSS文件並編寫要使用的CSS代碼。

3）在UI，插入註釋vaadin：

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

4）在Java代碼中，在Vaadin對象要更改，把一個樣式名稱如下：

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

5）在CSS文件中，你必須有一個同名的塊！

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

它工作！

來源

2017-03-01 16:45:20 ReNaR

更改Vaadin/Spring-Boot/Maven中的CSS

回答

相關問題