How set up my directory to work with eyeglass on fetching modularscale

Question

I'm trying to include the Sassy Modular Scale project into my build by using eyeglass. I was able to get it Modular Scale via the terminal by executing the command npm install modularscale-sass --save-dev in my project directory.

Then I took a look in my package.json and I saw that "modularscale-sass": "^2.1.1" was added and in my directory I could access the files under the node-modules directory. All good! Then the documentation for modular scale instructs me to @import 'modular-scale' in my main.scss file.

Now I run gulp watch and edit some random css and see if gulp complains about any errors and I get a throw error saying

Error: src/scss/main.scss 6:9 file to import not found or unreadable: modular-scale

I know this is happening bc gulp has no idea where to find modular-scale because eyeglass is prob not set up right atm.

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

Must I edit the eyeglass-exports.js file?

By looking at the js code I think that the most logical thing to do would be for me to add my directory name and stylesheet. My hypothesis is that the module.exports function will return a path for eyeglass to locate my directory name and stylesheets. Correct?

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

I found some documentation on eyeglass but it seems quite vague here:

In Sass files, you can reference the eyeglass module with standard Sass import syntax: @import "my_eyeglass_module/file";. The my_eyeglass_module will be resolved to the correct directory in your node modules, and the file will then resolve using the standard import rules for Sass.

Can someone please help explain how I to get this to work property.

Here's the link to my directory on github

Thank you

Answer 1

As much as I'd like to use eyeglass I feel like it's just not very clearly documented as in it's hard to set up for someone who's new to using gulp and npm. I would like to see these docs be a little more friendly to beginners like myself.

I did my very best to follow the Gulp integration guide however I was still getting errors that I had no idea how to deal with when I asked gulp to watch for changes.

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

As I said in my comment above I was quite confused as what you mean by saying disable import once with gulp until we figure out how to make them work together. My question is how do I get them to work together? I have no clue..

To pin point my main issue it's trying to get gulp to sync with eyeglass so I can retrieve modular-scale. This process confuses me a little and I would really like to see how it should be done.

Can you please set up a working Github repo with all that is required to get this work properly.

To solve my original issue which was to get modularscale into my project I just decided to do it the old school way. Can't go wrong.

So I went ahead and downloaded the zip file for modularscale.sass then I @import "vendors/modular-scale";into my main.scss file and all is working and good to go when I ask gulp to watch for changes.

Answer 2

How have you configured gulp to know to use eyeglass? Did you Read the gulp integration guide?

Answer 3

Using eyeglass v0.8.3, this worked for me.

Here's what I have:

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";

The only issue was the console warning that the modular-scale module did not declare a needs property in the package.json. I was also able to import the normalize-scss module, so this technique definitely works for those two modules.