流星，较少，和引导(Bootswatch)

Question

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

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

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

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

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

您还需要在这里添加/mixins文件夹中的所有较少的文件，因为这些文件是用mixins.less中的相对路径导入的。

然后，您可以在您自己的@import文件中使用这个奇怪的路径对变量/混频器进行@import：

@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。

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