Meteor 如何使用多个 .less 文件 [英] Meteor how to use multiple .less files
问题描述
我正在尝试在 Meteor 应用程序中使用两个 .less 文件.所有文件都在一个 Meteor 应用程序文件夹中.我有一个 .less 文件，它定义了一般的 UI 外观
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
在 ui.less 中:
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);
}
在 myapp.less 中
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;
}
但是，在 Meteor 提供的页面中，我得到:
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 ...
未导入 myapp.less 样式表?
The myapp.less stylesheet is not imported?
我想要一个可以@import 各种mixin .less 文件的应用程序.less 文件.做这个的最好方式是什么?
I want to have an app .less file that can @import various mixin .less files. What is the best way to do this?
推荐答案
因为这个问题似乎仍然存在我尝试回答它.
Because it seems like this question is still current I try to answer it.
在新版本的meteor(从v0.7.1.1 开始)中，.lessimport 被弃用了.新方法是 .import.less.方法是:
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})";
}
然后@import 到你想要在其中使用 mixin 的样式表中:
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);
}
这篇关于Meteor 如何使用多个 .less 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
