Generate CSS file from LESS file

239 views
Skip to first unread message

Anand Tiwari

unread,
Feb 4, 2014, 5:04:09 AM2/4/14
to wr...@googlegroups.com
Hi all,

I am having an issue in compiling my LESS files to CSS files. I have posted the issue on stackoverflow.com: http://stackoverflow.com/questions/21522869/wro4j-generate-css-file-from-less-file.

As suggested by  Alex Objelean, I am posting the same issue here in this discussion group. As per the suggestions, I tried the following code changes (in the code pasted in the stackoverflow link) to make the compilation work:

1) Removed all wro4j filter entries from web.xml.

2) Added wro.properties file inside WEB-INF folder with following entries:
    managerFactoryClassName=ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory
    preProcessors=cssUrlRewriting,lessCssImport
    postProcessors=less4j
    disableCache=true


3) Added wro.xml file inside WEB-INF folder with following group entry:
   
<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;
    }

4) Added the following entry in pom.xml:


<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]
[INFO] --- wro4j-maven-plugin:1.7.3:run (default) @ {WAR file name}---
[INFO] C:\workspace\{project name}/src/main/webapp/
[INFO] Executing the mojo:
[INFO] Wro4j Model path: C:\workspace\{project name}\src\main\webapp\WEB-INF\wro.xml
[INFO] targetGroups: base
[INFO] minimize: true
[INFO] ignoreMissingResources: false
[INFO] parallelProcessing: false
[INFO] destinationFolder: C:\workspace\{project name}\target
[INFO] jsDestinationFolder: null
[INFO] cssDestinationFolder: C:\workspace\{project name}\target\{WAR file name}\resources\skins\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\portal\target\RefSolnWebApp\resources\skins\test
[INFO] processing group: base.css
[INFO] folder: C:\workspace\portal\target
[INFO] processing group: base.js
[INFO]
[INFO] --- maven-war-plugin:2.1.1:war (default-war) @ {WAR file name}---
[INFO] Packaging webapp
[INFO] Assembling webapp [{WAR file name}] in [C:\workspace\{project name}\target\{WAR file name}]
[INFO] Processing war project................................................................................

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 execption.

Please suggest.

Regards.

 

Alex Objelean

unread,
Feb 4, 2014, 5:46:03 AM2/4/14
to wr...@googlegroups.com
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()
}  

Let me know if that works for you.

Cheers,
Alex


--
You received this message because you are subscribed to the Google Groups "wro4j" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wro4j+un...@googlegroups.com.
To post to this group, send email to wr...@googlegroups.com.
Visit this group at http://groups.google.com/group/wro4j.
For more options, visit https://groups.google.com/groups/opt_out.

Anand Tiwari

unread,
Feb 4, 2014, 7:14:00 AM2/4/14
to wr...@googlegroups.com
Hi Alex,

Thanks for your inputs. I was able to see the css file getting generated when I applied your suggestion.

However, I want to apply the class generated in the generated css file in a jsp. I want to apply that class to decorate a button.

Is there a workaround where I do not have to define that new div element and directly apply it in the jsp?

Regards 

Alex Objelean

unread,
Feb 4, 2014, 7:18:20 AM2/4/14
to wr...@googlegroups.com
The wro4j is handling css & js resources generation only. 
If you want to decorate a button in jsp, just create a div with a certain css class (expandable) which enhance the element with "expandable" feature and in your JSP, add this class to the buttons you want to decorate. 

Alex


--

Anand Tiwari

unread,
Feb 4, 2014, 7:59:38 AM2/4/14
to wr...@googlegroups.com
Hi Alex,

My original jsp code looks like this:

<div class='input_contain'>
        <button type="submit" id="loginSubmit" class="btn-expand">
        <s:message code="label.Sign.In"/>
        <span></span>
        </button>
</div>


The generated css file base.css contains the following:

div.expandable {
  box-sizing: border-box;
  height: 30px;

  display: inline-block;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 1px;
  margin-right: 20px;
  background: transparent url('../resources/skins/sasktel/images/sprites.png') no-repeat -5px -164px;

  border: 0;
  position: relative;
  outline: none;
  cursor: pointer;
  overflow: visible;
}


I tried changing the jsp code as follows (after including the new css file in the jsp):

<div class='input_contain'>
        <button type="submit" id="loginSubmit" class="expandable">
        <s:message code="label.Sign.In"/>
        <span></span>
        </button>
</div>


However, the changes did not work. Can you please suggest what is wrong here?

Regards

Alex Objelean

unread,
Feb 4, 2014, 8:02:39 AM2/4/14
to wr...@googlegroups.com
Since you  are adding the "expandable" class on button element, modify your css correspondingly:

button.expandable {
   //button styling 
}

Alex

Anand Tiwari

unread,
Feb 4, 2014, 8:17:25 AM2/4/14
to wr...@googlegroups.com
Ok, I added the following in my .less file

button.expandable {
    .btn-expand()
  

The generated css contains the code like:

button.expandable {

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


I modified the jsp as follows:


<div class='input_contain'>
                            <button type="submit" id="loginSubmit" class="expandable">
                                <s:message code="label.Sign.In"/>
                                <span></span>
                            </button>
                        </div>


However, I could not see the css decoration getting applied on the button.

This jsp has another jsp: header.jsp. I have the following line added in header.jsp:

<link rel="stylesheet" type="text/css" href=<c:url value="/resources/skins/abc/base.css"/> media="all" />

Regards.

Alex Objelean

unread,
Feb 4, 2014, 8:20:03 AM2/4/14
to wr...@googlegroups.com
This is rather a css related question. You could use Firebug or chrome developer tool to understand why the styling is not applied. 

Alex

Anand Tiwari

unread,
Feb 4, 2014, 8:37:10 AM2/4/14
to wr...@googlegroups.com
Hi Alex,

The issue seems to be related to the image path.

The .less file contains the following:


 background: transparent url('images/sprites.png') no-repeat -5px -164px;

The generated css contains the above as follows:
background: transparent url('../resources/skins/abc/images/sprites.png') no-repeat -5px -164px;

Is there a way to handle the above kind of scenario?

Regards

Alex Objelean

unread,
Feb 4, 2014, 8:40:18 AM2/4/14
to wr...@googlegroups.com
The cssUrlRewriting pre processor is responsible for rewriting the url's, so that these would point to a correct location after css (or less) resources are merged. If the rewritten url doesn't point to a valid location, please provide the expected url, so that it would be easier to understand why it is not computed correctly. 

Alex

Anand Tiwari

unread,
Feb 4, 2014, 9:00:43 AM2/4/14
to wr...@googlegroups.com
Hi Alex,

I removed the URL rewriting pre-processor from wro.properties. This made the background property appear like below in the generated css file:

 
     background: transparent url('images/sprites.png') no-repeat -5px -164px;


In addition, I also changed button.expandable to .expandable inside the .less file.

However, I still see some difference with the original (with the css file) and the new (less to css file) implementations.

Please refer to the screenshots attached.
using_css.jpg
using_less.jpg

Alex Objelean

unread,
Feb 4, 2014, 9:04:20 AM2/4/14
to wr...@googlegroups.com
I'm open to help you here with any question related to wro4j.
But this is a css styling question. Try debugging this problem using available tools or post this question on relevant mailing list. 

Cheers,
Alex

Anand Tiwari

unread,
Feb 4, 2014, 9:59:28 AM2/4/14
to wr...@googlegroups.com
Hi Alex,

The issue seems to be related to a few more classes related to the original class: btn-expand:

.btn-expand:active {
        outline: none;
    }

    .btn-expand span {
        background: transparent url('images/sprites.png') no-repeat -378px -164px;
        display: block;
        width: 20px;
        height: 30px;
        right: -20px;
        top: 0;
        position: absolute;
        outline: none;
    }

    .btn-expand:hover {
        background-position: -5px -196px;
    }

    .btn-expand:hover span {
        background-position: -378px -196px;
    }


Can you please suggest, how can i handle these in the existing mixin?

Regards.

Alex Objelean

unread,
Feb 4, 2014, 10:18:59 AM2/4/14
to wr...@googlegroups.com
You could try getting some help on mailing lists specialized on less & css. I'm afraid I can't help you with this.

Alex

Anand Tiwari

unread,
Feb 5, 2014, 4:20:27 AM2/5/14
to wr...@googlegroups.com
Hi Alex.

Thanks for all your help and assistance. It had been very useful to take things forward.

Will try to post my queries in the same thread if I get stuck up somewhere.

Thanks again.

Regards
Reply all
Reply to author
Forward
0 new messages