How to set up my catalog for working with glasses on a modular scale sample

Question

I am trying to incorporate a Sassy Modular Scale project into my build using eyeglass . I was able to get the modular scale through the terminal by running the npm install modularscale-sass --save-dev in my project directory.

Then I looked at my package.json , and I saw that "modularscale-sass": "^2.1.1" was added "modularscale-sass": "^2.1.1" , and in my directory I could access the files in the node-modules directory. Things are good! The documentation for modular scale then tells me @import 'modular-scale' in my main.scss file.

Now I run gulp watch and edit some random css and see that 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 the points are not set correctly atm.

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

Should I edit eyeglass-exports.js ?

Looking at the js code, I think the most logical thing for me would be to add my directory name and style sheet. My hypothesis is that the module.exports function will return the path for module.exports to find the name of my directory and style sheet. Right?

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

I found the documentation on glasses, but it looks rather vague:

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

Can someone please explain how I can make this work.

Here is a link to my github directory

thanks

Answer 1

As much as I would like to use glasses, I feel that this is simply not very clearly documented, since it is difficult to configure someone who does not want to use gulp and npm. I would like these documents to be a little more friendly to beginners like me.

I did my 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 keep track of the 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 rather confused as you say that one day disable imports with gulp until we figure out how to get them to work together. My question is: how do I get them to work together? I have no idea.

To indicate my main problem, she is trying to get gulp to synchronize with glasses so that I can get a modular scale. This process confuses me a bit, and I would really like to see how it should be done.

Can you set up a working Github repository with everything you need to work properly.

To solve my original problem, which was supposed to get a modular scale in my project, I just decided to do it in the old school. It can't go wrong.

So, I went and uploaded the zip file for modularscale.sass , then I @import "vendors/modular-scale"; into my main.scss file and everything works and it’s good to go when I ask gulp to follow the changes.

Answer 2

How did you configure gulp to know to use glasses? Have you read the gulp integration guide ?

Answer 3

Using eyeglass v0.8.3 , this worked for me.

Here is 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 problem was the console warning that the modular-scale module did not declare the needs property in package.json . I was also able to import the normalize-scss , so this method definitely works for these two modules.