Menu
I am trying to use two .less files in a Meteor app. All files are in a single Meteor app folder. I have one .less file that defines general UI look-and-feel
In ui.less:
.ui-gradient-topdown(@from, @to) {
background-color: @from;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0% 0% 100%, from(@from), to(@to));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, @from, @to);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, @from, @to);
/* IE 10+ */
background-image: -ms-linear-gradient(top, @from, @to);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, @from, @to);
}
In myapp.less
@import "ui";
html {
min-height: 100%;
min-width: 320px;
}
body {
.ui-gradient-topdown(#000, #FFF);
}
#new_message_input {
background: #F00;
overflow: scroll;
}
However, in the page that is served up by Meteor, I get:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/ui.less.css">
... more stuff below ...
The myapp.less stylesheet is not imported?
I want to have an app .less file that can @import various mixin .less files. What is the best way to do this?
390
From the Meteor Docs:
If you want to @import a file, give it the extension .lessimport to prevent Meteor from processing it independently.
20
Because it seems like this question is still current I try to answer it.
In newer versions of meteor (beginning with v0.7.1.1) .lessimport got deprecated. The new way is .import.less. The way to to it is:
// client/mixins.import.less
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
then @import it in your stylesheet you want to use your mixins in:
// client/main.less
@import "mixins.import.less";
// relative to the current file
// if absolute it will be relative to your project root
.some-div {
.opacity(0.5);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
