Render scss file dynamically with node-sass on Heroku

Question

i'm currently trying to render a scss file with some dynamic variables. On my local machine everything works fine. On Heroku i get this error:

Error: File to import not found or unreadable: bower_components/sass-mixins/mixins

const fs = require('fs');
const sass = require('node-sass');

var path = 'assets/compiled/' + client.id + '.css';
var dynamic = '$brand-primary: #CCC;';


fs.readFile('assets/scss/application.scss', function(err, data) {
    sass.render({
        data: dynamic + data,
        includePaths: [
            __dirname + '/../../',
            __dirname + '/../../bower_components'
        ]
    }, function(err, result) {
          // do sth. with result
    });
});

I already played around with the includePaths added process.cwd(), __dirname, ../../ and what not.

The assets/scss/application.scss looks like this:

$brand-primary: #306bb3 !default;
$brand-success: #ffb034 !default;
$gray-lighter: #e4e8ea !default;
$gray-lightest: #f5f5f5 !default;
$gray-dark: #555555 !default;

@import "bower_components/sass-mixins/mixins";
@import "bower_components/bootstrap/scss/bootstrap.scss";
@import "bower_components/font-awesome/scss/font-awesome";
@import "bower_components/fatcow-icons/flags-16px.css";
@import "bower_components/cookieconsent/build/cookieconsent.min.css";

@import "assets/scss/_partials/_layout";

I don't know why it works perfectly fine on my machine but not on Heroku...

Answer 1

The issue is most likely that bower install wasn't called during deploy