opened
pdehaan
username_0
I'm using Node.js and ran `npm i breakpoint-sass` and got the previous error when trying to use the `@breakpoint` mixin in my Sass file.

### package.json
```json
{
  "name": "break-sass",
  "version": "1.0.0",
  "dependencies": {
    "breakpoint-sass": "2.6.1"
  },
  "devDependencies": {
    "gulp": "3.9.0",
    "gulp-sass": "2.1.1"
  }
}
```

### gulpfile.js
```js
const breakpoint = require('breakpoint-sass');
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('in.scss')
    .pipe(sass({
      includePaths: [
        breakpoint.includePaths
      ]
    }).on('error', sass.logError))
    .pipe(gulp.dest('out.css'));
});
```

### in.scss
```scss
$hidpi: min-resolution 1.5dppx;

#foo {
  @include breakpoint($hidpi) {
    content: 'Device Pixel Ratio of at least 1.5';
  }
}
```

## Actual results:
```
➜  break-sass  gulp sass

/Users/username_0/dev/tmp/del/break-sass/node_modules/breakpoint-sass/stylesheets/_breakpoint.scss:4
$Breakpoint-Settings: (
                    ^
SyntaxError: Unexpected token :
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/username_0/dev/tmp/del/break-sass/gulpfile.js:1:82)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
```
"SyntaxError: Unexpected token :" when using Node.js
issue
created
Snugug
username_1
I'm not entirely sure why you expected this to work? Breakpoint doesn't provide any JavaScript whatsoever so `includePaths` isn't a thing that can be used. Breakpoint is distributed through NPM as an [Eyeglass](https://github.com/sass-eyeglass/eyeglass) module, so you'll need to use Eyeglass to use it via NPM
comment
closed
Snugug
username_1
issue
created
Overload119
username_2
I just ran into this while setting up a Rails 5 app with.

This was the only Google result for the issue, so hopefully this will save someone some time:

I ended up running something like this in the `sass.js` loader:

`path.join(__dirname, '../../../node_modules/breakpoint-sass/stylesheets'),` in

```
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')
const path = require('path');

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      'postcss-loader',
      {
        loader: 'sass-loader',
        options: {
          includePaths: [
            require('bourbon').includePaths,
            // I don't know how to configure this to not be manual...
            path.join(__dirname, '../../../node_modules/breakpoint-sass/stylesheets'),
          ],
        }
      },
    ]
  })
}
```

This was simpler than learning how Eyeglass would integrate into Webpacker rails.
comment