Meteor、LESS 和 Bootstrap (Bootswatch)

Question

所以，我正在尝试编写一个小型 Meteor 包，其中包括 LESS 版本的 Bootstrap，以及我最喜欢的 Bootswatch 主题。我显然做错了什么，因为当我尝试使用普通的 Bootstrap 网格系统时，什么也没有发生。

package.js

Package.describe({
    summary: "Bootstrap 3, using Sandstone Bootswatch.  (LESS version)",
    version: "3.2.0",
    git: "https://github.com/czbaker/meteor-bootstrap-3-sandstone"
});

Package.onUse(function(api) {

    // For Meteor 0.9.1.1
    api.versionsFrom('METEOR@0.9.1.1');

    // Dependencies
    api.use('less', 'client');
    api.use('jquery', 'client');

    // Bootstrap's Javascript Stuff
    api.add_files('lib/js/transition.js', 'client');
    api.add_files('lib/js/alert.js', 'client');
    api.add_files('lib/js/button.js', 'client');
    api.add_files('lib/js/carousel.js', 'client');
    api.add_files('lib/js/collapse.js', 'client');
    api.add_files('lib/js/dropdown.js', 'client');
    api.add_files('lib/js/modal.js', 'client');
    api.add_files('lib/js/tooltip.js', 'client');
    api.add_files('lib/js/popover.js', 'client');
    api.add_files('lib/js/scrollspy.js', 'client');
    api.add_files('lib/js/tab.js', 'client');
    api.add_files('lib/js/affix.js', 'client');

    // Fonts
    api.add_files('lib/fonts/glyphicons-halflings-regular.eot', 'client');
    api.add_files('lib/fonts/glyphicons-halflings-regular.svg', 'client');
    api.add_files('lib/fonts/glyphicons-halflings-regular.ttf', 'client');
    api.add_files('lib/fonts/glyphicons-halflings-regular.woff', 'client');

});

这大致基于 0.9 之前的包，并将处理（希望）在 Bootstrap 中提供 JavaScript 内容。我的问题目前与 LESS 文件有关。这是我的包的树：

misutowolf@jakiro ~/projects/bootstrap-3-sandstone-less $ tree
.
├── lib
│   ├── fonts
│   │   ├── glyphicons-halflings-regular.eot
│   │   ├── glyphicons-halflings-regular.svg
│   │   ├── glyphicons-halflings-regular.ttf
│   │   └── glyphicons-halflings-regular.woff
│   ├── js
│   │   ├── affix.js
│   │   ├── alert.js
│   │   ├── button.js
│   │   ├── carousel.js
│   │   ├── collapse.js
│   │   ├── dropdown.js
│   │   ├── modal.js
│   │   ├── popover.js
│   │   ├── scrollspy.js
│   │   ├── tab.js
│   │   ├── tooltip.js
│   │   └── transition.js
│   └── less
│       ├── alerts.import.less
│       ├── badges.import.less
│       ├── bootstrap.import.less
│       ├── bootswatch.import.less
│       ├── breadcrumbs.import.less
│       ├── button-groups.import.less
│       ├── buttons.import.less
│       ├── carousel.import.less
│       ├── close.import.less
│       ├── code.import.less
│       ├── component-animations.import.less
│       ├── dropdowns.import.less
│       ├── forms.import.less
│       ├── glyphicons.import.less
│       ├── grid.import.less
│       ├── input-groups.import.less
│       ├── jumbotron.import.less
│       ├── labels.import.less
│       ├── list-group.import.less
│       ├── media.import.less
│       ├── mixins
│       │   ├── alerts.import.less
│       │   ├── background-variant.import.less
│       │   ├── border-radius.import.less
│       │   ├── buttons.import.less
│       │   ├── center-block.import.less
│       │   ├── clearfix.import.less
│       │   ├── forms.import.less
│       │   ├── gradients.import.less
│       │   ├── grid-framework.import.less
│       │   ├── grid.import.less
│       │   ├── hide-text.import.less
│       │   ├── image.import.less
│       │   ├── labels.import.less
│       │   ├── list-group.import.less
│       │   ├── nav-divider.import.less
│       │   ├── nav-vertical-align.import.less
│       │   ├── opacity.import.less
│       │   ├── pagination.import.less
│       │   ├── panels.import.less
│       │   ├── progress-bar.import.less
│       │   ├── reset-filter.import.less
│       │   ├── resize.import.less
│       │   ├── responsive-visibility.import.less
│       │   ├── size.import.less
│       │   ├── tab-focus.import.less
│       │   ├── table-row.import.less
│       │   ├── text-emphasis.import.less
│       │   ├── text-overflow.import.less
│       │   └── vendor-prefixes.import.less
│       ├── mixins.import.less
│       ├── modals.import.less
│       ├── navbar.import.less
│       ├── navs.import.less
│       ├── normalize.import.less
│       ├── pager.import.less
│       ├── pagination.import.less
│       ├── panels.import.less
│       ├── popovers.import.less
│       ├── print.import.less
│       ├── progress-bars.import.less
│       ├── responsive-embed.import.less
│       ├── responsive-utilities.import.less
│       ├── scaffolding.import.less
│       ├── tables.import.less
│       ├── theme.import.less
│       ├── thumbnails.import.less
│       ├── tooltip.import.less
│       ├── type.import.less
│       ├── utilities.import.less
│       ├── variables.import.less
│       └── wells.import.less
├── package.js
└── versions.json

所以，我知道为了让 Meteor 不处理 LESS 文件，它们必须命名为 <file>.import.less，这很好。我不明白从这里去哪里。

在我的项目（测试）中，我假设我需要编写一个主 .less 文件，该文件将从我的包中导入主 bootstrap.import.less，但我不知道它的位置，可以这么说.在 0.9 之前，这应该是 /packages/<package>/lib/less/bootstrap.import.less 或类似的东西。

我在这里缺少什么？我还认为，如果我只是从主引导程序“容器”中删除 .import，它只会作为包的一部分包含在我的应用程序中，但事实并非如此。如果是这样，我是否会这样做，然后使用api.add_files('lib/less/bootstrap.less'); 将其提供给客户？

Answer 1

当在带有api.add_files 的包中添加.less 文件时，捆绑包时实际发生的情况是，它被转换为.less.css 文件。因此，没有可供您使用的 mixin。此外，如果要使用真正的 .less 文件，则需要在要使用 mixins/变量的文件中 @import 。

有一个黑客。您可以将文件作为资产添加到服务器。

api.add_files([
  "lib/less/variables.less",
  "lib/less/mixins.less"
  ... add all the mixins .less files here too...
], "server", {
  isAsset: true
})

您还需要在此处添加 /mixins 文件夹中的所有 less 文件，因为这些文件是通过 mixins.less 中的相对路径导入的。

您可以@import 变量/mixins 然后在您自己的.less 文件中，使用这个古怪的路径：

@bootstrap-path: ".meteor/local/build/programs/server/assets/packages/{your_user_name}_{your_package_name}/lib/less";
@import "@{bootstrap-path}/mixins.less";

将{your_user_name}_{your_package_name} 替换为您发布包时使用的名称。 user:package 将到达 user_package。

但请记住，发送到客户端的 Bootstrap 少代码已经转换为 css，因此无法更改变量或 mixins 来调整 Bootstrap 设置。