如何使用webpack导入ruby gems(断点)

Question

我已经安装了susy和sass，并在webpack-config:中设置了css/sass加载程序

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

这是我的主要scss文件：

@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);
}

这是webpack输出中的错误

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)

有人知道如何正确使用@import断点吗？

Answer 1

假设您安装了断点sass包：

npm install breakpoint-sass --save-dev

然后你必须导入它，但"让SASS加载程序知道"这个"断点"元素在SASS文件夹之外，还有其他节点模块：

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

Answer 2

查看sass-loader导入文档：

sass加载程序使用node sass的自定义导入程序功能将所有查询传递给webpack解析引擎。因此，您可以从node_modules导入Sass模块。只需在它们前面加一个~，就可以告诉webpack这不是一个相对导入。

和

写入@import"file"与@import"./file"相同。

大致描述一下你所看到的问题。

解决方案

解决方法是安装一个用于断点的npm包，而不是gem，然后从node_modules导入它，就像使用susy一样。或者，您可以尝试@import到ruby gem的完整文件路径。