SquishIt 0.8.6 and Twitter Bootstrap returns blank css file

[GD]

Hello,

I am trying to get SquishIt 0.8.6 to work with twitter bootstrap. I added all the LESS files and I attempted the following command in my _Layout.cshtml file:

@Html.Raw(Bundle.Css().Add("~/assets/less/alerts.less").ForceRelease().Render("~/assets/css/alerts.css"))

When I run my code, it does perform a valid link output but there is nothing within the generated css file. I am not sure what I am doing wrong here. Its possible I am missing something. Any tips would be greatly appreciated.

(I am also new to LESS compilation so I might be missing something obvious).

Thank you!

[Seth Cleaver]

Hi,

The issue is that the bootstrap alerts.less file probably relies on some mixins and variables declared in other less files within the bootstrap framework. If you look in the alerts.less file you will notice that is is using variables such as @baseLineHeight and @warningBackground which are declared within the variables.less files.

This is why it renders blank - cause they are missing.

To make it work you need to use alerts.less in conjunction with at least "variables.less" - there may also be other files that variables.less needs but you might be fine with just variables:

The easiest way I have found to do this is have a single less file like "combine.less" and then in combine.less use the @import at the top like so:

@import "libs/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc

@import "libs/bootstrap/buttons.less";

@import "libs/bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

The call you combine.less like so in your page or masterpage:

<%@ Import Namespace="SquishIt.Framework" %>

<%= Bundle.Css()

        .Add("~/inc/css/combine.less")

        .WithMinifier<SquishIt.Framework.Minifiers.CSS.YuiCompressor>()

        .Render("~/inc/css/min/combined.#.css")

        %>

Hope that helps.

Seth

--

Kind regards,

Seth Cleaver

webinsite

Strategy, Insight, Innovation.

07 3102 9797   /   0412 750 008

se...@webinsite.com.au

www.webinsite.com.au   |   PO Box 5577 Brendale QLD 4500   |   ABN 94 178 758 639

[GD]

Seth,

Thanks for providing these options. Definitely learned a lot more. I tried this block of code:

@Html.Raw(Bundle.Css().Add("~/assets/less/bootstrap.less").WithMinifier<SquishIt.Framework.Minifiers.CSS.YuiCompressor>().Render("~/assets/css/combined.#.css"))

(I found a file called bootstrap.less that describes exactly what your combine.less file would accomplish).

When running the site I get the output:

<link rel="stylesheet" type="text/css" href="/assets/less/bootstrap.less.debug.css" />
This is interesting because I didn't even specify that as my output file name. And just to confirm other than installing the SquishIt libs (which includes Yahoo.Yui.Compressor assembly). I don't need to install any additional programs, right?

I feel like there is a critical error somewhere but not sure how to view this error. I had a similar problem when I was trying out "Chirpy" a couple months back and I couldn't find a solution for that either.

My ultimate goal would be to modify the twitter bootstrap variables and compile to my liking.

Thanks for all your help!

On Tuesday, May 1, 2012 9:33:41 AM UTC-4, Seth wrote:

Hi,

The issue is that the bootstrap alerts.less file probably relies on some mixins and variables declared in other less files within the bootstrap framework. If you look in the alerts.less file you will notice that is is using variables such as @baseLineHeight and @warningBackground which are declared within the variables.less files.

This is why it renders blank - cause they are missing.

To make it work you need to use alerts.less in conjunction with at least "variables.less" - there may also be other files that variables.less needs but you might be fine with just variables:

The easiest way I have found to do this is have a single less file like "combine.less" and then in combine.less use the @import at the top like so:

@import "libs/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc

@import "libs/bootstrap/buttons.less";

@import "libs/bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

The call you combine.less like so in your page or masterpage:

<%@ Import Namespace="SquishIt.Framework" %>

<%= Bundle.Css()

        .Add("~/inc/css/combine.less")

        .WithMinifier<SquishIt.Framework.Minifiers.CSS.YuiCompressor>()

        .Render("~/inc/css/min/combined.#.css")

        %>

Hope that helps.

Seth

Hello,

I am trying to get SquishIt 0.8.6 to work with twitter bootstrap. I added all the LESS files and I attempted the following command in my _Layout.cshtml file:

@Html.Raw(Bundle.Css().Add("~/assets/less/alerts.less").ForceRelease().Render("~/assets/css/alerts.css"))

When I run my code, it does perform a valid link output but there is nothing within the generated css file. I am not sure what I am doing wrong here. Its possible I am missing something. Any tips would be greatly appreciated.

(I am also new to LESS compilation so I might be missing something obvious).

Thank you!

--

Kind regards,

Seth Cleaver

webinsite

Strategy, Insight, Innovation.

07 3102 9797   /   0412 750 008

[GD]

One important point I left out....the output file is still blank.

[Seth Cleaver]

When you are running you project in debug it Squishit will not minify the css and instead you get the .debug.css extension with all the css neatly laid out inside - so that you can troubleshoot.

Once your project is with debug="false" the it will generate the combined.#.css which will be minified. 

se...@webinsite.com.au

[Seth Cleaver]

Are you using dotless 1.3?

se...@webinsite.com.au