How to Add CSS to Vaadin/Maven Project

How to add css to Vaadin / Maven project?

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");
    ...

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

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

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

Including css in spring based project with vaadin

Fixed the problem.

I was using a multi-modules maven project, and the main method which contains the @SpringBootApplication and which runs the entire application was not in the same module where the vaadin frontend folder.

Solution was to move the main class to the same maven module as the one used for vaadin.

changes in style.css reset when clean install vaadin-maven project

The stuff in styles.css is compiled by sass compiler from inherited themes (Valo in most recent version) and from your application specific styles.scss. You should consider it as the ".class" file where ".scss" files are your themes ".java" files.

If you want to fall back from the "sass magic" to basic CSS based themes, build the theme once and then remove or comment out the "compile-theme" target from the vaadin-maven-plugin configuration in your pom.xml. Then the .css file is no more overridden by vaadin maven plugin. If you have created your project using vaadin-application-archetype, there is also probably a maven-clean-plugin configuration that removes existing .css files from VAADIN/themes directory on each "mvn clean" command. Be sure to remove that as well.

Vaadin 7 build with Maven, how to prevent style.css from being always re-generated

Sass is an extension of CSS. Here is a description: link

Maven generates CSS from Sass. You can put your custom css code into styles.scss.

How to include a custom SASS file in a Vaadin 14 application?

Following @Kaspar Scherrer's answer, I was able to generate a custom build of Twitter Bootstrap to include as CSS on my Vaadin 14 app by performing the following steps:

1. Include Bootstrap’s source Sass and JavaScript files via npm, running npm install bootstrap on the CLI in the project's root dir;

2. Setup libsass-maven-plugin on my project's pom.xml:

<!-- SASS compiler -->
<plugin>
  <groupId>com.gitlab.haynes</groupId>
  <artifactId>libsass-maven-plugin</artifactId>
  <version>0.2.21</version>
  <executions>
    <execution>
      <phase>generate-resources</phase>
      <goals>
        <goal>compile</goal>
      </goals>
    </execution>
  </executions>
  <configuration>
    <inputPath>${basedir}/src/main/webapp/frontend/sass/</inputPath>
    <includePath>${basedir}/node_modules/</includePath>
    <outputPath>${basedir}/src/main/webapp/frontend/css/</outputPath>
    <failOnError>true</failOnError>
  </configuration>
</plugin>

3. Created the custom SASS file, named webapp-bootstrap.scss in this example, inside the dir set on inputPath:

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

// Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

@import "bootstrap/scss/mixins/breakpoints";
@import "bootstrap/scss/mixins/clearfix";
@import "bootstrap/scss/mixins/deprecate";
@import "bootstrap/scss/mixins/grid-framework";
@import "bootstrap/scss/mixins/grid";
@import "bootstrap/scss/mixins/hover";
@import "bootstrap/scss/mixins/screen-reader";
@import "bootstrap/scss/mixins/text-emphasis";
@import "bootstrap/scss/mixins/text-hide";
@import "bootstrap/scss/mixins/text-truncate";

// Optional
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities/align";
@import "bootstrap/scss/utilities/clearfix";
@import "bootstrap/scss/utilities/display";
@import "bootstrap/scss/utilities/flex";
@import "bootstrap/scss/utilities/float";
@import "bootstrap/scss/utilities/position";
@import "bootstrap/scss/utilities/screenreaders";
@import "bootstrap/scss/utilities/sizing";
@import "bootstrap/scss/utilities/spacing";
@import "bootstrap/scss/utilities/text";

4. Included the generated stylesheets on my app by using an annotation @StyleSheet("css/webapp-bootstrap.css").

Vaadin 10 and springboot - How to package a jar?

finally the solution

css has to be here:

src/main/resources/META-INF/resources/frontend/styles.css

then declared as:

@StyleSheet("frontend://styles.css")

Where is the css style sheet for Vaadin?

The default stylesheets are all packaged inside the Vaadin JAR, and are served from there.

If you need a custom theme, then you need to create the folder and theme file yourseld inside the WebContent/VAADIN/themes folder.

(Edit: corrected the path, it shouldn't be WEB-INF/VAADIN. WebContent/VAADIN/themes is the correct place for custom themes)

Vaadin 14.6.1 - Error: Can't resolve 'lumo-css-framework/all-classes.css'

Your project is missing the lumo-css-framework npm dependency. There are two ways you can add it:

1. npm install --save lumo-css-framework. This will store the dependency in package.json which contains a list of all npm dependencies needed in the project. It is academically wrong to say that package.json is auto generated as what Vaadin really does it populates package.json with whatever the Java side (mainly components) define as their npm dependencies. Any other dependency defined in package.json is left alone.

2. Annotate any Java class in the project with @NpmDependency(value="lumo-css-framework", version="^3.0.11"). This annotation will be used by Vaadin when figuring out what npm dependencies are needed for the project and then package.json will be updated based on the annotation.

---

Related Topics