How to import breakpoint with webpack?

[captainkovalsky]

Hi guys,

I've installed susy and sass, after that include css/sass loader to webpack config

{ test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }

Here is my main scss file

@import "~susy/sass/susy";
@import "breakpoint";

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside
);

.layout {
  @include container();
  @include layout(12 1/4);
}

This is an error in a webpack output

ERROR in ./src/styles/base.scss
Module build failed: ModuleBuildError: Module build failed: 
@import "breakpoint";
^
      File to import not found or unreadable: breakpoint

gems which are installed

viktors-mbp:~ viktor$ gem list breakpoint sass compass

*** LOCAL GEMS ***

breakpoint (2.7.0)

*** LOCAL GEMS ***

sass (3.4.22)
sassy-maps (0.4.0)

*** LOCAL GEMS ***

compass (1.1.0.alpha.3, 1.0.3)
compass-core (1.1.0.alpha.3, 1.0.3)
compass-import-once (1.0.5)
viktors-mbp:~ viktor$ 

Does anyone know how to properly import breakpoint ?

[ShaunKT]

Have a look at http://hownodejs.com/39/01/how-to-import-ruby-gems-breakpoint-with-webpack.html it seems to have a solution

[ignaciosegura]

Assuming you installed breakpoint-sass package:

npm install breakpoint-sass --save-dev

Then you have to import it letting the SASS loader know that this element you want to import, that is, "breakpoint", is outside the SASS folder, with the other node modules:

@import '~breakpoint-sass/stylesheets/breakpoint';

[tavurth]

Perhaps we could add this to the Readme, or rather the wiki?

[galakhov]

Yes, please add this line to the "Installation" section to the project's wiki:

npm i -D breakpoint-sass

and this line to the "Using Breakpoint":

@import "../node_modules/breakpoint-sass/stylesheets/_breakpoint";

[Tamenze]

+1 on the wiki edit