BILL BILL - 2 months ago 24
Sass (Sass) Question

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
breakpoint ?


Take a look at the sass-loader import documentation:

The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import.


Writing @import "file" is the same as @import "./file".

pretty much describe the issue you're seeing.


The answer to this would be to either install a npm package for breakpoint instead of the gem and import it from node_modules, as you did with susy. Or you could try to @import the full file path to the ruby gem.