如何设置我的目录以使用eyeglass获取modularscale_JavaScript

我正试图通过使用将Sassy Modular Scale项目纳入我的构建中。 通过在我的项目目录中执行命令npm install modularscale-sass --save-dev ，我可以通过终端获得Modular Scale。

然后我查看了我的package.json ，我看到了"modularscale-sass": "^2.1.1"已添加，在我的目录中，我可以访问node-modules目录下的文件。 都好！ 然后的指示我在main.scss文件中使用main.scss @import 'modular-scale' 。

现在我运行gulp watch并编辑一些随机的css，看看gulp是否抱怨任何错误，我得到一个抛出错误说

Error: src/scss/main.scss 6:9要导入的文件未找到或不可读： modular-scale

我知道这种情况正在发生bc gulp不知道在哪里可以找到modular-scale因为眼镜可能无法正确设置。

protfolio/ 
|
|-- dest/
|    |-- /js
|    |-- /css
|
|-- node_modules
|   |-- modularscale-sass
|   | .. 
|
|-- src/
|    |-- /js
|    |-- /scss
|        |-- /modules
|            |-- .. 
|        |-- /partails
|            |-- ..  
|        |-- /vendors
|            |-- ..
|        |-- main.scss 
|
|-- gulpfile.js 
| ..

我必须编辑eyeglass-exports.js文件吗？

通过查看js代码，我认为最合乎逻辑的做法是添加我的目录名称和样式表。 我的假设是module.exports函数将返回一个眼镜路径来定位我的目录名称和样式表。 正确？

var path = require('path');
// add my directory and stylesheet? 
module.exports = function(eyeglass, sass) {
  return {
    sassDir: path.join(__dirname, 'stylesheets')
  }
}

我找到了一些关于眼镜的文档，但这里看起来很模糊：

在Sass文件中，您可以使用标准Sass导入语法引用眼镜模块： @import "my_eyeglass_module/file"; 。 my_eyeglass_module将被解析为节点模块中的正确目录，然后该文件将使用Sass的标准导入规则进行解析。

有人可以帮助解释我如何让这个工作属性。

这是上我的目录的链接

谢谢

尽管我想使用眼镜，但我觉得它并没有非常清楚地记录下来，因为很难为那些使用gulp和npm的人设置。 我希望看到这些文档对像我这样的初学者来说更友好一些。

我尽力遵循但是我仍然遇到错误，当我要求gulp观察变化时我不知道如何处理。

var gulp = require("gulp");
var sass = require("gulp-sass");
var Eyeglass = require("eyeglass").Eyeglass;

var eyeglass = new Eyeglass({
  // ... node-sass options
    importer: function(uri, prev, done) {
        done(sass.compiler.types.NULL);
    }
});


// Disable import once with gulp until we
// figure out how to make them work together.

// How do I get them to work together? This is confusing.

eyeglass.enableImportOnce = false

gulp.task("sass", function () {
  gulp.src("./sass/**/*.scss")
    .pipe(sass(eyeglass.sassOptions()).on("error", sass.logError))
    .pipe(gulp.dest("./css"));
});

正如我在上面的评论中所说的那样，我很困惑，因为我们的意思是禁止导入一次gulp，直到我们弄清楚如何使它们一起工作。 我的问题是如何让他们一起工作？ 我没有线索..

为了指出我的主要问题，它试图让我们与眼镜同步，这样我就可以检索模块化规模。 这个过程让我感到困惑，我真的很想知道应该怎么做。

你能否设置一个正常工作的Github仓库，以满足这项工作所需的一切。

为了解决我的原始问题，即将modularscale纳入我的项目，我决定以旧学校的方式做到这一点。 不能出错。

所以我继续下载了的zip文件然后我@import "vendors/modular-scale"; 进入我的main.scss文件，当我要求gulp观察更改时，一切正常并且很好。

你怎么配置gulp知道使用眼镜？ 你读过吗？

使用眼镜v0.8.3 ，这对我有用。

这就是我所拥有的：

gulpfile.js

// gulpfile.js
// node_modules requires
...
eyeglass       = require('eyeglass'),
...

// after all requires, setup eyeglass options
var options = eyeglass({
    sassOptions: {
        errLogToConsole: true,
        outputStyle: 'expanded'
    },
    eyeglass: {
        enableImportOnce: false
    },
    importer: function(uri, prev, done) {
        done(sass.compiler.types.NULL);
    }
});

// inside my gulp sass task
...
.pipe(sass(options).on('error', sass.logError))

main.scss

@import "modular-scale";

唯一的问题是控制台警告modular-scale模块没有在package.json声明needs属性。 我还能够导入normalize-scss模块，因此这种技术绝对适用于这两个模块。

如何设置我的目录以使用eyeglass获取modularscale

问题描述

1楼

2楼

3楼

gulpfile.js

main.scss