如何将CSS添加到Vaadin/Maven项目中? [英] How to add css to Vaadin / Maven project?

问题描述

在SO上存在 SO的问题将CSS添加到Vaadin项目.提示是在/WEB-INF/VAADIN/themes/位置添加css.

There exists a question at SO about how to add css to Vaadin project. The tip there was to add css at /WEB-INF/VAADIN/themes/ location.

我的问题是Vaadin项目通常在WebContent下有WEB-INF文件夹，而现在在Maven上，类似的文件夹在webapp下.这似乎导致我的CSS更改未生效.

My problem is that Vaadin projects normally have WEB-INF folder under WebContent and now on Maven the similar folder is under webapp. This seems to be causing that my css changes do not take effect.

此外，是否有必要在与原始CSS相同的子结构中使用自定义CSS?我想修改table css，不知道css是否需要位于特定路径中.

Also, is it necessary to have the custom css in same sub-structure as the original css? I want to modify table css and don't know if the css needs to be in a specific path.

那么，如何为表添加CSS，以便更改表，而不仅仅是代码正确构建? :)

So how to add the css for table so that also the table is changed, not just that the code builds correctly? :)

更新1 :我可以使用Firebug消除以下问题，但这是我最接近浏览器的东西.

Update 1: I could get the following tempalate out with Firebug, but this is closest thing what I get to browser.

<链接rel ="stylesheet" type ="text/css" href ="/html/VAADIN/themes/mytheme/styles.css">
< html>
<头>
<标题>< /标题>
< /head>

< body onload ="javascript:location.replace('/c')">
< ！-下面的数字用于填充空间，以便在IE中正常工作. 请参见 http://support.microsoft.com/default.aspx ?scid = kb; zh-CN; Q294807 了解更多 有关为什么这样做的必要信息.
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
->
< /body>
< /html>
< /link>

< link rel="stylesheet" type="text/css" href="/html/VAADIN/themes/mytheme/styles.css" >
< html >
< head >
< title > < /title >
< /head >

< body onload="javascript:location.replace('/c')" >
< !--The numbers below are used to fill up space so that this works properly in IE. See http://support.microsoft.com/default.aspx?scid=kb;en-us;Q294807 for more information on why this is necessary.
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
-- >
< /body >
< /html >
< /link >

推荐答案

您可能会将styles.css文件放在src/main/webapp/VAADIN/themes/[yourtheme]/文件夹中，并配置Maven将src/main/webapp中的所有内容复制到WEB-INF中.这样，您的.css文件将以WEB-INF/VAADIN/themes/[yourtheme]/结尾.

You will probably put your styles.css file in the src/main/webapp/VAADIN/themes/[yourtheme]/ folder and configure Maven to copy everything in src/main/webapp into your WEB-INF. This way your .css file will end up in WEB-INF/VAADIN/themes/[yourtheme]/.

强烈建议从主题继承而不是尝试覆盖默认主题的行为.

It is strongly recommended to inherit from a theme rather than trying to override the behavior of a default theme.

然后您需要在应用程序中指定主题名称

Then you need to specify your theme name in the application

public void init()
{
    setTheme("simplegae");
    ...

并使您的.css文件从主题的CSS(符文，驯鹿，...)继承.

and make your .css file inherit from a theme's css (runo, reindeer, ...).

@import "../reindeer/styles.css";

我最近使用Maven制作了一个Vaadin应用程序示例，可在

I have recently put up a sample Vaadin application using Maven which is accessible at this address. It is aimed to work on GAE, but you can check it out from SVN and have a look at what I have done:

svn co http://code.google.com/p/tinywebgears-samples/source/browse/trunk/simplegae/ simplegae

这篇关于如何将CSS添加到Vaadin/Maven项目中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！