程序员经验分享-hwhale

Meteor 如何使用多个 .less 文件

2024-01-11

我正在尝试在 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 样式表未导入？

我想要一个应用程序 .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})";
}

然后在你想要使用 mixin 的样式表中@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);
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Meteor

Meteor 如何使用多个 .less 文件 的相关文章

  • 流星和陨石（mrt）有什么区别？

    例如 有些网站告诉我使用mrt add accounts ui 使用陨石 对吧 其他人说meteor add accounts ui 据我了解 陨石 https github com oortcloud meteorite只是一个版本控制

  • 编写/转换 Meteor 同步函数

    这已经困扰我一段时间了 所以我想我应该对其进行快速的质量检查 如果有一个普通的nodeJS模块或其他东西 并且它在服务器端有一个异步功能 我如何使其同步 例如我如何转换nodejsfs stat异步函数转为同步函数 例如我有 服务器端js

  • 更新 Meteor 中的嵌套数组

    这是我的架构 id FJwSEMdDriddXLKXh name t number 5 owners id 1 name Name address Address type Type gender Gender notes 单击后 我将在所

  • Meteor - 使用 Meteor.wrapAsync() 包装 NPM

    我正在尝试使用 Meteor wrapAsync 包装超级代理 NPM 一切正常 直到下面代码的最后一行 这导致我的流星应用程序崩溃 var superagent Meteor npmRequire superagent Example o

  • Accounts.onCreateUser 在创建新用户时添加额外属性，好的做法吗？

    我正在创建新用户Accounts createUser http docs meteor com full accounts createuser如果你不做任何花哨的事情 它就会正常工作 但我想向新用户添加一些文档中未列出的其他字段 这是我

  • 在流星收集加载时显示加载程序

    我有一个模板 task list 看起来像这样 each tasks gt task each Template task list tasks返回一个集合 在用户界面中 加载似乎需要一些时间 当集合正在加载时 我想显示一个加载指示器 关于

  • Meteor 更新卡在下载包中

    我正在尝试更新到 Meteor 1 2 但是当我运行 Meteor update 时 它 开始运行并到达 Downloading 8 packages 然后旋转器就停止了 这样持续了20分钟左右 我尝试过退出该过程并再次启动它 但结果相同

  • 在 Meteor 中运行示例的问题

    我正在测试 Meteor 示例 这是我运行时看到的meteor在待办事项示例中 Unexpected mongo exit code 100 Restarting Unexpected mongo exit code 100 Restart

  • 4 级订阅嵌套在流星中

    我正在使用流星 这是我的架构 每个都是一个单独的集合 课程有很多讲座 讲座有很多问题 问题有很多答案 我想要一页可以显示给定课程的讲座 问题和答案 我可以毫无问题地显示课程的讲座 但在显示更多嵌套项目时遇到问题 我理想地希望拥有 讲座有 c

  • mongodb 获取最后插入的文档

    此 Meteor 代码尝试查找集合中的最后一个文档 find userId this userId sort createdAt 1 limit 1 但由于所有文档都是按时间顺序排列的 我想删除createdAt字段 所以一旦被 删除 是否

  • 流星图像、CSS、“普通”Web 服务

    我经常看到这个问题出现 如何在我的 Meteor 网站上放置图像 如何使用 Meteor 托管 标准 网页内容 我尝试添加一个 img src img myimage png 标签但没有图像显示 如何在 Meteor 站点上托管一些文件 将

  • 带有 CSS 过渡的 Meteor 模板

    当通过模板助手触发 CSS 转换时 Meteor 似乎会跳过这些转换 有办法解决这个问题吗 Example

  • 如何将 CSV 文件中的数据导入到服务器端的 Meteor 集合中

    我正在尝试为我之前的帖子找到解决方案 Mongo 在 Meteor 应用程序中的 id 字段上给出重复键错误 https stackoverflow com questions 28961281 mongo gives duplicate

  • 在 Meteor.method 中调用函数返回未定义

    过去几天我一直在尝试从 Meteor 方法获取返回对象 每次我这样做我都会得到undefined在客户端上 Meteor methods CORSTest function let url www theverge com 2017 4 1

  • Enzyme - 测试嵌套组件是否正确呈现

    我正在尝试测试当通过简单的布尔值更新状态时 在父组件中其子组件是否正确呈现 在父组件下面 class Parent extends Component render const isReady this state const props

  • 为什么我的调试器在视觉上停止在错误的行？

    我在用 email protected cdn cgi l email protection email protected cdn cgi l email protection email protected cdn cgi l emai

  • Mongodb 聚合使用 $group 两次

    我在 mongo 中有一堆文档 其结构如下 id number 2 colour id name Green hex 00ff00 position id name Defence type position ageGroup id nam

  • Meteor：更改点击链接的类别

    模板

  • MeteorJS：用户集合如何公开新字段

    我在用户集合中添加了新字段 但是当我在客户端 Meteor user cart 中访问它时 cart 是我的新字段 其未定义 如何公开新字段 购物车 以便可以在客户端中访问 最简单的方法是添加一个null发布者将自动发送数据 无需订阅 请务

  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电

随机推荐

热门标签