I am not able to use node-bourbon in the project

Question

I try to use npm module for scss files. Node-bourbon.

I get the following error:

  with: function() {
var paths  = Array.prototype.slice.call(arguments);
return [].concat.apply([bourbon.includePaths], paths);
}
};

  Invalid CSS after "v": expected 1 selector or at-rule, was "var path =   require("
  in C:\Users\gwk736\GitLab\Inform\node_modules\node-bourbon\index.js (line   1, column 1)
@ ./src/app/header/header.component.ts 20:21-55

My scss first line:

@import "~node-bourbon";

My component:

import { Component } from 'angular2/core';

@Component({
selector: 'header',
template: require('./header.component.html'),
styles: [ require('./header.component.scss') ]
})
export class HeaderComponent {
headerTitle: string = 'title';
}

Answer 1

Assuming you are using webpack, so you should use loader for scss like sass-loader (https://github.com/jtangelder/sass-loader).

Check this project: https://github.com/fraserxu/webpack-bourbon-test

Answer 2

Turns out there is an issue with node-sass version 7.

I have posted two possible workarounds here: https://stackoverflow.com/a/51502840/2212881