Javascript Meteor、LESS和引导（引导样本）

因此，我正试图编写一个小Meteor软件包，其中包含引导的较少版本，以及我最喜欢的引导样本主题。我显然做错了什么，因为当我尝试使用正常的引导网格系统时，什么都没有发生

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之前的包，并将处理（希望）在引导中提供JavaScript内容。我的问题是目前文件较少。这是我的包裹的一棵树：

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不处理更少的文件，它们必须命名为

.import.LESS

，这很好。我不明白的是接下来该怎么办

在我的项目（测试）中，我假设我需要编写一个main

.less

文件，该文件将从我的包中导入main

bootstrap.import.less，但可以说，我不知道它位于何处。在0.9之前，这应该在
/packages//lib/less/bootstrap.import.less
或类似的东西中

我错过了什么？我还认为，如果我从主引导程序“容器”中删除
.import
，它将作为包的一部分包含进来，并提供给我的应用程序，但情况也并非如此。如果是这样，我会这样做，然后使用
api.add_文件（'lib/less/bootstrap.less'）
提供给客户机？
在使用
api.add\u files
的包中添加
.less
文件时，包被捆扎时实际发生的情况是，它被转换为
.less.css
文件。因此没有可供您使用的混音器。此外，如果要使用真正的
.less
文件，则需要在要使用mixin/变量的文件中导入它

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

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
中的相对路径导入的

您可以
@导入
变量/mixin，然后将其放入自己的
文件中。更少的
文件中，使用以下奇怪的路径：

@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}
替换为发布包时使用的名称<代码>用户：软件包

将进入

用户\软件包

---

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

因此，我想我应该在发布此问题之前尝试我的最后一个建议。在从“container”Bootstrap.less文件中删除

.import

并使用

api.add_files

后，它似乎工作正常，至少现在我的测试文档具有与之相关的样式。不过，我仍然无法在自定义的.less文件中使用引导的mixin。