CODEWITHSUNDEEP
meteorsass
cstingl
cstingl

Reputation: 603

Exposing Sass file from Meteor package for Meteor App importing

I'm working on building a package for meteor 0.9+ that exposes a library off sass mixins called 'Bourbon' and am trying to sort out the best way to provide access to '@import' a stylesheet from the package into a Meteor project.

https://github.com/wolvesio/meteor-bourbon/

Pre Meteor 0.9 this used to be done via something along the lines of: @import "packages/wolves:bourbon/bourbon";

Since the package system changed though this no longer works. Any help as to the best way to do this moving forward would be greatly appreciated.

Upvotes: 1

Views: 665

Answers (1)

saimeunt
saimeunt

Reputation: 22696

I've managed to accomplish what you want, it's a bit hacky but it works at last.

First, you need to add the .less files as server assets in your package :

Package.onUse(function(api){
  api.addFiles([
    "bourbon/style1.less",
    ...
    "bourbon/styleN.less"
  ],"server",{
    isAsset:true
  });
});

Then run meteor to trigger the building of your application : this will copy over the server assets to the .meteor directory of your application. More precisely, your .less files will now live in ".meteor/local/build/programs/server/assets/packages/wolves:bourbon/bourbon/*".

Now you can reference these .less files in your application using this super unfriendly path. I recommend hiding this stuff from your package users by defining an import.less directly in the package :

packages/wolves:bourbon/bourbon.import.less

@bourbon-root: ".meteor/local/build/programs/server/assets/packages/wolves:bourbon/bourbon/";

@import "@{bourbon-root}style1.less";
//
@import "@{bourbon-root}styleN.less";

Then in the package README, invite your users to simply copy bourbon.import.less in their client directory and reference it from there.

client/lib/config/style.less

@import "bourbon.import.less";

There is one drawback to this approach that I was unable to solve at the moment : the .less files are copied in the .meteor directory when your application is built (a process that happens when triggering meteor run).

However, the build process will try to compile your application .less files FIRST, before copying the server assets (in this case our package .less files) to the .meteor dir.

So the very first time you add the package to an app, it will complain that it is unable to find the package .less files, triggering a rebuild (either by killing and relaunching meteor or touching your application .less files) will fix this though.

Upvotes: 2

Related Questions