[英]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: 我已经安装了susy和sass,并在webpack配置中设置了css / sass加载器:
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
Here is my main scss file: 这是我的主要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);
}
This is an error in a webpack output 这是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)
Does anyone know how to properly @import
breakpoint ? 有谁知道如何正确
@import
断点?
Assuming you installed breakpoint-sass package: 假设您安装了breakpoint-sass软件包:
npm install breakpoint-sass --save-dev
Then you have to import it, but "letting the SASS loader know" that this "breakpoint" element is outside the SASS folder, with the other node modules: 然后,您必须导入它,但是要“让SASS加载程序知道”,该“断点”元素位于SASS文件夹之外,并且带有其他节点模块:
@import '~breakpoint-sass/stylesheets/breakpoint';
Take a look at the sass-loader
import documentation : 看看
sass-loader
导入文档 :
The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine.
sass-loader使用node-sass的自定义导入器功能将所有查询传递到Webpack解析引擎。 Thus you can import your Sass modules from node_modules.
因此,您可以从node_modules导入Sass模块。 Just prepend them with a ~ to tell webpack that this is not a relative import.
只需在它们前面加上〜即可告诉webpack这不是相对导入。
and 和
Writing @import "file" is the same as @import "./file".
编写@import“文件”与@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
. 答案是要么像安装
susy
一样,要么为断点安装npm软件包而不是gem,然后从node_modules导入它。 Or you could try to @import
the full file path to the ruby gem. 或者,您可以尝试
@import
红宝石gem的完整文件路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.