2

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 ?

4

2 に答える 2

1

sass-loaderインポートドキュメントをご覧ください。

sass-loader は node-sass のカスタム インポーター機能を使用して、すべてのクエリを webpack 解決エンジンに渡します。したがって、node_modules から Sass モジュールをインポートできます。~ を先頭に追加して、これが相対インポートではないことを webpack に伝えます。

と

@import "file" と書くことは @import "./file" と同じです。

あなたが見ている問題をほとんど説明します。

解決

これに対する答えは、gem の代わりにブレークポイント用の npm パッケージをインストールし、node_modules からインポートすることですsusy。@importまたは、ruby gem への完全なファイル パスを試すこともできます。

于 2016-05-07T18:26:26.183 に答える