Fatal编程技术网
  • sass/
  • Sass 如何使用webpack导入ruby gems（断点）？

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

sass webpack

Sass 如何使用webpack导入ruby gems（断点）？,sass,webpack,breakpoint-sass,Sass,Webpack,Breakpoint Sass,我已经安装了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,

我已经安装了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);
}
这是网页包输出中的错误

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)
有人知道如何正确地导入断点吗？

看看
sass加载程序导入：

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

及

写入@import“file”与写入@import“/file”相同

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

解决方案

解决方法是安装一个而不是gem，然后从node_模块导入它，就像您在
susy
中所做的那样。或者您可以尝试导入ruby gem的完整文件路径。
假设您安装了breakpoint sass包：


npm安装断点sass——保存开发人员

然后您必须导入它，但“让SASS加载程序知道”此“断点”元素在SASS文件夹之外，其他节点模块：


@import'~断点sass/stylesheets/breakpoint'