我正在尝试在 Meteor 应用程序中使用两个 .less 文件。所有文件都在一个 Meteor 应用程序文件夹中。我有一个定义一般 UI 外观的 .less 文件
在 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
@import "ui";
html {
min-height: 100%;
min-width: 320px;
}
body {
.ui-gradient-topdown(#000, #FFF);
}
#new_message_input {
background: #F00;
overflow: scroll;
}
但是，在 Meteor 提供的页面中，我得到:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/ui.less.css">
... more stuff below ...
未导入 myapp.less 样式表？
我想要一个可以@import 各种 mixin .less 文件的 app .less 文件。做这个的最好方式是什么？
最佳答案
我没有足够的声誉来为@EzRaM 发表评论，作为 Meteor 初学者，我有点挣扎，我希望这对其他人有所帮助。
在 Meteor 1.6 中，我想包含 myOwnMixins.less 文件以从 node_module @import 另一个 .less 文件，这就是我所做的:
1)/client/myOwnMixins.less (无需重命名*.import.less)
@import '/node_modules/antd/lib/style/themes/default.less';
.right {
float: right;
height: 100%;
}
... more less code ...
2)/imports/ui/layout/MyHeader.js，不需要导入/client/myOwnMixins.less文件，因为.less是由meteor编译并默认包含的，只需使用className即可。
<div className="right">Right Aligned</div>
关于Meteor 如何使用多个 .less 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10442201/