Using bourbon and neat in a vue-meteor project

[muckz]

I can't figure out how to import bourbon and / or neat into a single file component. I've tried installing bourbon manually and via npm, but after importing "bourbon" or the main "_bourbon.scss" file meteor throws an error that the import files in there can't be found. I know this has something to do with the includePath which is necessary in order to make this work, but I don't know where to set it. Any help would be appreciated, thanks.

[Akryum]

Try importing the files with the ~ syntax:

@import "~bourbon/path-to-dist/_bourbon.scss";

[muckz]

Ok, I tried that. The _bourbon.scss file imports other scss files from bourbon and there it fails again. So changing the import statement to

@import "~client/styles/libs/bourbon/_bourbon.scss";

results in this error:

Error: Unknown import (file not found): settings/prefixer]
  formatted: 'Error: Unknown import (file not found): settings/prefixer\n        on line 6 of client/styles/libs/bourbon/_bourbon.scss\n>> @import "settings/prefixer";\n   --------^\n',
  message: 'Unknown import (file not found): settings/prefixer',

Like I mentioned bourbon and neat depend on setting the includePath for node-sass.

For example:

var sass = require('node-sass')
var bourbon = require('node-bourbon');
sass.render({
        ...
    includePaths: bourbon.includePaths,
});

Looking at the source code of the vue-sass package, there is no way to set the includePaths. Maybe it would be a good idea to be able to globally set them in the main.js file (for example). This would enable using bourbon and neat and surely some other libraries using their npm package.