sasswebpackbreakpoint-sass

How to import ruby gems (breakpoint) with webpack?

I've installed susy and sass, and set up the css/sass loader in the 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)

Does anyone know how to properly @import breakpoint ?

Solution

  • Assuming you installed breakpoint-sass package:

    npm install breakpoint-sass --save-dev

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

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