@reference not finding assets

[dschnare]

trafficstars

The @reference directive doesn't seem to be working. Here's my LESS files:

Content/Styles/main.less:

// @reference variables.less
body { color: red; }

Content/Styles/variables.less:

@link: #8cbf33;
@linkHover: darken(@link, 15%);
@conversationLink: #60a800;
@conversationHover: #608323;

I know in LESS you can use @import but there was a use case where I needed to @reference a normal CSS file due to vendor specific viewport styles that were causing the LESS compiler to complain (as well as having to reference the Bootstrap compiled CSS files). However, this @reference issue seems to affect any file type referenced.

In my Cassette configuration script I have the following:

bundles.Add<StylesheetBundle>("~/Bundles/styles", new []{
  "~/Content/Styles/main.less"
});

[dschnare]

Forgot to mention that all my LESS assets have Build Action set to Content.

Here's my package list:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="AjaxMin" version="5.3.5068.16463" targetFramework="net40" />
  <package id="Cassette" version="2.3.0" targetFramework="net40" />
  <package id="Cassette.Aspnet" version="2.3.0" targetFramework="net40" />
  <package id="Cassette.Less" version="2.3.0" targetFramework="net40" />
  <package id="Cassette.Views" version="2.3.0" targetFramework="net40" />
  <package id="DotlessClientOnly" version="1.3.1.0" targetFramework="net40" />
  <package id="jQuery" version="1.10.2" targetFramework="net40" />
  <package id="Microsoft.AspNet.Mvc" version="3.0.20105.1" targetFramework="net40" />
  <package id="Microsoft.AspNet.Razor" version="1.0.20105.408" targetFramework="net40" />
  <package id="Microsoft.AspNet.WebPages" version="1.0.20105.408" targetFramework="net40" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net40" />
  <package id="Modernizr" version="2.6.2" targetFramework="net40" />
  <package id="Twitter.Bootstrap" version="2.3.2" targetFramework="net40" />
  <package id="WebActivator" version="1.5.3" targetFramework="net40" />
</packages>

[dschnare]

I've tried re-installing Cassette with no success. I've also tried removing the problematic @reference line and going to /cassette.axd to attempt to clear the cache, but there's no "Clear Cache" button. I'm really running out of options here.

[Crisfole]

:+1: Can't get this working either and it feels a touch ridiculous. (As in, the fact that I can't figure it out).

[andrewdavey]

I'm not sure I understand. What error are you getting?

[Crisfole]

Looks like I misread dschnare's problem. It's not the same as mine. I'll open a separate issue for mine...

@dschnare Use @import for less imports. "@reference" is only useful to Cassette: less needs to know about the imported files to successfully pull in variables mixins and other re-usable pieces so it can compile things. Cassette uses @reference directives for ordering resources when it links to them or combines and minifies them.

[greggbjensen]

I am having the same issue with Cassette 2.4.2 and less. The previous version 2.2.2 read the @reference comments correctly, but 2.4.2 ignores them and is unable to compile the less files unless I use @import. We don't want to use @import because the required less files are already loaded on the page and we don't want them in-lined again. Any help would be appreciated.

[greggbjensen]

Here is an example of the error:

Error compiling ~/Content/less/shared/layout.less
.container is undefined on line 10 in file '~/Content/less/shared/layout.less':

@import works but @reference does not.

@import "../lib/bootstrap/grid.less";
// @reference ../lib/bootstrap/grid.less