Compiliation of less from npm packages

help
1

Seems to be known issue: https://github.com/meteor/meteor/issues/6037

I just moved my project succesfully to 1.3. But i just realized that one of used npm packages ( ui-notification) holds an less style sheet, that is not compiled/included in my application with angular-meteor mvvm. Is there any guideline or hint how to import/compile less or sass from npm packages etc?

2

Having the same problem. Getting error
client/main.less:2: Unknown import:

And i’m doing this:

@import '{my-package-in-node_modules}/less/main';

3

Fix being tracked in https://github.com/meteor/meteor/issues/6037

However, word is that only CSS will be supported on import from node_modules on initial release. There are some potential workarounds/hacks such as creating a symbolic link from your /imports directory and importing from there. Also, some experimental solutions using npm scripts to first process the Less file or using PostCSS. Bottom line is there is not a good solution right now.

1 Like
4

So I’ve went with Symbolic link approach as you mentioned. The next hurdle is dealing with a package that imports less from another package.

@import "../node_modules/font-awesome/less/font-awesome";

I was hoping that by symlinking the whole of node_modules under imports would allow me to make all other packages/dependencies work, but less is intentionally ignoring all node_modules dirs it seems. Any way to monkeypatch less to make it work?

5

The Meteor build tool and the Less pre-processor are going to ignore any directories with node_modules in the path. Can you just set up the symbolic link to the directory with the less files?
ln -s /path/to/node_modules/font-awesome/less /path/to/imports/font-awesome
(create imports/font-awesome directory first)

Then you should be able to
@import "{}/imports/font-awesome/less/variables.less"
assuming /imports is at top of your app directory. I’ve not tested this but I think it should work.

To attempt to answer your original question about modifying the Less build plugin. I assume this could be done, but the symlink seems much easier. At some point I think MDG will need to support this directly with the CSS pre-processor build plugins.

6

Looks like support for importing from node_modules with CSS and CSS pre-processors is here in Meteor 1.3.2-rc.0.

You should be able to import like:

@import '{}/node_modules/font-awesome/less/variables.less';

Give it a shot and report back if you have time.

7

Thanks, that would work, except i’m not allowed to modify this package, so i’m stuck with trying to make it work with @import "../node_modules/font-awesome/less/font-awesome";. It is actually a very common pattern with NPM to do `…/node_modules’ so hoping that can be sorted somehow.

8

Just an update for anyone else searching for a solution. Release 1.3.2-rc.5 and upcoming 1.3.2 has solved the issue. Everything now works as expected.

9

Well still some issues with semantic-ui-less for instance…

10

I’m using 1.3.2 RC6 in the Meteor Starter Kit and I’m able to include SASS from node_modules :smiley: I’m really happy about this!

I wrote a short blog post about it if anyone is interested?

Floyd Price
Meteor Casts - https://floydprice.com