如何使用 webpack 导入 ruby gems（断点）？

Question

我已经安装了 susy 和 sass，并在 webpack 配置中设置了 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-loader 导入 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".

大致描述了您遇到的问题。

解决方案

对此的答案是安装 npm package for breakpoint 而不是 gem 并从 node_modules 导入它，就像您对 susy 所做的那样。或者您可以尝试 @import ruby gem.

的完整文件路径

Answer 2

假设你安装了 breakpoint-sass 包：

npm install breakpoint-sass --save-dev

然后你必须导入它，但是 "letting the SASS loader know" 这个 "breakpoint" 元素在 SASS 文件夹之外，其他节点模块：

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

如何使用 webpack 导入 ruby gems（断点）？

How to import ruby gems (breakpoint) with webpack?

sass

breakpoint-sass

webpack

解决方案