javascript - 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从主 Bootstrap “容器”中，它只会作为包的一部分包含在内，并将其提供给我的应用程序，但事实也并非如此。如果是这样，我会这样做，然后使用 api.add_files('lib/less/bootstrap.less');提供给客户？

Answer 1

当使用 api.add_files 在包中添加一个 .less 文件时，当包被绑定(bind)时实际发生的是，它被转换为一个 。 less.css 文件。所以没有可供您使用的mixin。此外，如果要使用真正的 .less 文件，您需要在要使用混入/变量的文件中@import它。

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

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 less 代码已经转换为 css，因此无法更改变量或 mixins 来调整 Bootstrap 设置。