Meteor, LESS, and Bootstrap (Bootswatch)

Question

So, I'm trying to author a small Meteor package that includes the LESS version of Bootstrap, along with my favorite Bootswatch theme. I'm apparently doing something wrong, because when I try to even use the normal Bootstrap grid system, nothing happens.

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');

});

This is loosely based on a pre-0.9 package, and will deal with (hopefully) providing the JavaScript stuff in Bootstrap. My problem is currently with the LESS files. Here's a tree of my Package:

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

So, I understand that in order to get Meteor to not process LESS files, they must be named <file>.import.less, and that's fine. What I don't understand is where to go from here.

In my project (testing), I assumed that I would need to write a main .less file, which would import the main bootstrap.import.less from my package, but I don't know where it's located, so to speak. Pre-0.9, this would have been in /packages/<package>/lib/less/bootstrap.import.less, or something like that.

What am I missing here? I thought also if I just dropped the .import from the main bootstrap "container", that it would just get included as part of the package, and provide it to my app, but that's not the case either. If that were so, would I just do that, and then use api.add_files('lib/less/bootstrap.less'); to provide it to the client?

Answer 1

When adding a .less file in a package with api.add_files, what actually happens when then package is strapped is, it gets converted to a .less.css file. So there are no mixins available for you to use. Additionally, if there was a real .less file to be used, you would need to @import it in the file where you want to use the mixins/variables.

There is a hack. You could add the files as an asset to the server.

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

You will need to add all the less files in the /mixins folder here too, since those are imported with an relative path in mixins.less.

You're able to @import the variables/mixins then in your own .less files, with this quirky path:

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

Replace the {your_user_name}_{your_package_name} with the name under which you publish your package. user:package will get to user_package.

But remember, that the Bootstrap less code which is sent to the client already got converted to css, so there is no way to change the variables or mixins to adjust the Bootstrap settings.