How do I use Less with a aurelia cli project

1
votes

How do I get Less to work with an aurelia cli project?

I've added a style.less file under src and I can see it's bundled into app-bundle.js. But I am not sure if or how I need to add reference to it in app.html?

I've added a div tag 

<div class="test-less">Test less</div>

in app.html using a class in my style.less file but when I run the app the css is not used - even though I can see the css in the app-bundle.js:

define('text!style.css', ['module'], function(module) { module.exports = ".test-less {\n  color: #FF0000;\n  background-color: green;\n}\n"; });

I'm not sure what the 'define..' actually does - ie does it inject the css into the DOM? It is listed beneath the define statement which includes the app.html - so maybe it's out of scope - so not usable in app.html???? If so, how should one use Less with Aurelia (project created by aurelia CLI)

Thanks Tim

1
lessaurelia
you need to require it: <require from="./path/to/style.css"></require> in you app.html - Rabah

1 Answers

1
votes

As @Rabah-g stated - I needed to add a require eg:

<require from="style.css"></require>

To figure out what path to use - I just used what was stated in the 'define' statement in app-bundle.js. In this case simply 'style.css'.