Wro4j: Generate CSS file from LESS file

Question

Editing the original question to provide all the details.

Added following in web.xml:

<filter>
    <filter-name>WroContextFilter</filter-name>
    <filter-class>ro.isdc.wro.http.WroContextFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>WroContextFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
    <filter-name>WebResourceOptimizer</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    <init-param>
        <param-name>targetBeanName</param-name>
        <param-value>wroFilter</param-value>
    </init-param>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>WebResourceOptimizer</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Created two new files wro.xml and wro.properties inside WEB-INF folder:

wro.properties:

managerFactoryClassName=ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory
preProcessors=less4j,cssUrlRewriting,lessCssImport
postProcessors=less4j
disableCache=true

wro.xml:

<groups xmlns="http://www.isdc.ro/wro">
    <group name="base">
        <css>/resources/skins/abc/testing.less</css>
    </group>
</groups>

Here 'resources' is a folder inside: src/main/webapp.

A file testing.less is added inside /resources/skins/abc/ folder:

.btn-expand (@height: 30px) {
        box-sizing: border-box;
        height: @height;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        padding-left: 20px;
        padding-right: 1px;
        margin-right: 20px;
        background: transparent url('images/sprites.png') no-repeat -5px -164px;
        border: 0;
        position: relative;
        outline: none;
        cursor:pointer;
        overflow: visible;
    }

The pom.xml file contains the following entries:

<repository>
    <id>releases</id>
    <name>Releases</name>
    <url>https://oss.sonatype.org/content/repositories/releases</url>
</repository>   (Inside <repositories> tag)

<dependency>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-core</artifactId>
    <version>1.6.2</version>
</dependency>  (Inside <dependencies> tag)

<plugin>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-maven-plugin</artifactId>
    <version>1.7.3</version>
    <configuration>
    <targetGroups>base</targetGroups>
        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
        <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/resources/css/test/</cssDestinationFolder>
        <wroFile>${basedir}/src/main/webapp/WEB-INF/wro.xml</wroFile>
        <extraConfigFile>${basedir}/src/main/webapp/WEB-INF/wro.properties</extraConfigFile>
        <contextFolder>${basedir}/src/main/webapp/</contextFolder>
        <ignoreMissingResources>false</ignoreMissingResources>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>run</goal>
            </goals>
            <phase>prepare-package</phase>
        </execution>
    </executions>
</plugin>  [Inside <build> <plugins> tag.]

I have not installed the m2e-wro4j plugin in my eclipse IDE.

Based on the above, I assume that when i do a maven build from command prompt [mvn clean install], a css file named base.css should be created inside /resources/css/test/ folder. I can see the new folder 'test' in the exploded project WAR file but it does not contain the base.css file. The console output looks something like this:

[INFO] Wro4j Model path: C:\workspace\{projectname}\src\main\webapp\WEB-INF\wro.xml
[INFO] targetGroups: base
[INFO] minimize: true
[INFO] ignoreMissingResources: false
[INFO] parallelProcessing: false
[INFO] destinationFolder: C:\workspace\{projectname}\target
[INFO] jsDestinationFolder: null
[INFO] cssDestinationFolder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] groupNameMappingFile: null
[INFO] wroManagerFactory class: ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
[INFO] The following groups will be processed: [base]
[INFO] folder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] processing group: base.css
[INFO] folder: C:\workspace\{projectname}\target
[INFO] processing group: base.js

One more observation. To make sure that that wro.properties file is correctly placed and is picked up by the plugin, I tried some wrong values in this file [postProcessors=less4jtttt] and could see an exception while doing the build. However, an invalid file path in wro.xml file did not throw any exception.

Could you provide the output created when running the plugin? Also, could you try to upgrade the wro4j version to 1.7.3 and use the less4j (much faster) processor instead of lessCss (which is based on rhino and is quite slow). Beside that, the wro.xml should contain the group definitions (which are missing from issue description). — Alex Objelean, Feb 03 '14 at 15:21
Hi Alex, I have modified the original post with all details. Please help — anand tiwari, Feb 04 '14 at 07:22
I don't think stackoverflow is appropriate for providing this kind of support. If you want, we can discuss this issue either on wro4j mailing list or on a dedicated issue. What puzzles me, is that you are using both: runtime and build-time solution in the same time... Also, you specify two different wro4j versions in your pom.xml. Another problem is that you are using less4j processor as both: pre & post processor. Another thing is: the console output is incomplete.. it doesn't the final completion results of the maven plugin. — Alex Objelean, Feb 04 '14 at 08:00
Hi Alex, I tried a few other ways: i removed less4j from the pre-processor list. I also removed the filters from web.xml and I also removed all the entries from pom.xml except the wro4j-maven-plugin entry. However, I could still not see the CSS getting generated. We can surely continue this discussion on the wro4j mailing list. I will post the details there. — anand tiwari, Feb 04 '14 at 09:13
Hi Alex, the same query has been posted in the wro4j mailing list: https://groups.google.com/forum/#!topic/wro4j/HdSHPpLbxPw — anand tiwari, Feb 04 '14 at 10:05

score 1 · Answer 1 · answered Feb 04 '14 at 12:19

Though the answer was posted also on the mailing list, I'll post it also here for visibility:

I've managed to reproduce your test-case locally and what I see is an empty file. First impression is that there is a problem, but actually this is the expected behavior. The less content being processed defines a mixin which does not produce any output as long as it is not being used.

To get a valid output, update your less to use that mixin:

div.expandable {
    .btn-expand()
}

Wro4j: Generate CSS file from LESS file

1 Answers1