Meteor如何使用多个.less文件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Meteor如何使用多个.less文件相关的知识，希望对你有一定的参考价值。
我试图在Meteor应用程序中使用两个.less文件。所有文件都在一个Meteor应用程序文件夹中。我有一个.less文件，定义了一般的UI外观
在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样式表是不是导入的？
我想要一个app .less文件，可以@import各种mixin .less文件。做这个的最好方式是什么？
因为看起来这个问题仍然是最新的我试着回答它。
在较新版本的meteor中（从v0.7.1.1开始）.lessimport已被弃用。新的方式是.import.less。通往它的方法是：
// client/mixins.import.less
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
然后在你的样式表中@import你要使用你的mixins：
// 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 Docs：
如果你想@import一个文件，给它扩展名.lessimport以防止Meteor独立处理它。
我来的是什么：
将所有较少的文件放在“client”文件夹中。
Meteor编译它们，因此不需要导入语句。
导入功能很棒！变量破坏了事物。
我没有足够的声誉为@EzRaM发表评论，而我作为流星初学者有点挣扎，我希望这有助于其他人。
在Meteor 1.6中，我想将myOwnMixins.less文件包含在@import来自node_module的另一个.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文件的主要内容，如果未能解决你的问题，请参考以下文章
Meteor i18n - 如何拥有多个模板，每种语言一个？
Gulp + Less +缩小CSS错误：连续多个Less文件？