Meteor 如何使用多个 .less 文件
Posted
技术标签:
【中文标题】Meteor 如何使用多个 .less 文件【英文标题】：Meteor how to use multiple .less files 【发布时间】：2012-05-13 14:33:53 【问题描述】：我正在尝试在 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 文件。做这个的最好方式是什么？
【问题讨论】：
我不知道为什么你的第二个 less 文件不会被加载。但我在这里看到了关于如何导入 raw 的其他讨论 -> ***.com/questions/10152515/…. 【参考方案1】：我来了：
将所有less文件放在“client”文件夹中。
Meteor 会编译它们，因此不需要 import 语句。
导入函数效果很好！变量会破坏事物。
【讨论】：
您能否阐明“变量破坏事物”的含义。 这里不起作用，我不能使用来自另一个文件的mixin，这些文件似乎相互隔离。myapp.less: Less compiler error: .ui-gradient-topdown is undefined
这在 Meteor 1.1 中不起作用。改用“mymixins.import.less”文件，并明确地@import 它，例如@import ../relative/path/mymixins.import.less.【参考方案2】：
来自Meteor Docs：
如果你想@import 一个文件，给它扩展名 .lessimport 到 防止 Meteor 独立处理它。
【讨论】：
似乎是一个已知的错误，很快就会修复github.com/meteor/meteor/issues/203 很高兴看到他们把它修好了。 之后做import "lessfile.lessimport";
更正：“lessimport”已被弃用，取而代之的是“import.less”【参考方案3】：
因为这个问题似乎仍然是最新的，所以我尝试回答它。
在较新版本的流星（从 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)";
然后在你想要使用你的 mixins 的样式表中 @import 它：
// 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);
【讨论】：
【参考方案4】：我没有足够的声誉为@EzRaM 发表评论，作为 Meteor 初学者，我有点挣扎，我希望这对其他人有所帮助。
在 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 是由流星编译并默认包含的，只需使用 className。
<div className="right">Right Aligned</div>
【讨论】：
以上是关于Meteor 如何使用多个 .less 文件的主要内容，如果未能解决你的问题，请参考以下文章
如何使 Meteor React 内联 svg 元素单击页面链接而不刷新整个页面