Need help to use Typey about typey

[jptaranto]

If you are using gulp-sass then you're on libsass already. Have you looked into using Eyeglass? It's what I would recommend here. Just add it as a dependency in npm, and then adjust your gulp task so it's calling eyeglass, instead of gulp-sass. You'll get typey automatically then without having to specify include paths just by using @import 'typey';

If you don't want to go to all that trouble, I would look at your include paths. Are you getting a 'typey' not found error? To test typey you can do something really simple like font-size: font-size(12px).

You'll want to specify any variable overrides in your application.scss as per the (somewhat limited) documentation in the repos readme. Otherwise have a look at the variables file inside stylesheets/typey/_defaults.scss.

[pryley]

@webmasterpf Something like this:

gulpfile.js

var gulp           = require( 'gulp' );
var autoprefixer   = require( 'gulp-autoprefixer' );
var cssnano        = require( 'gulp-cssnano' );
var gulpif         = require( 'gulp-if' );
var sass           = require( 'gulp-sass' );
var moduleImporter = require( 'sass-module-importer' );
var args           = require( 'yargs' ).argv;

/* CSS Task
 -------------------------------------------------- */
gulp.task( 'css', function ()
{
    return gulp
        .src('src/scss/*.scss')
        .pipe( sass({
            importer: moduleImporter(),
            outputStyle: 'expanded'
        }).on( 'error', sass.logError ))
        .pipe( autoprefixer() )
        .pipe( gulpif( args.production, cssnano({
            discardComments: { removeAll: true }
        })))
        .pipe( gulp.dest( 'assets/css' ))
});

// ...

SASS file:

@import "typey";

[webmasterpf]

@jptaranto I had an error with my path to typey and I think doing fix it now :

var basePaths = {
    src: './sass/**/*.scss', // fichiers scss à surveiller
    dest:  './css/', // dossier à livrer
    node_modules: './node_modules/',
    gems:'/home/webmaster/vendor/bundle/gems/'
};

and other path variables, originally designed to separate gems from node modules,

var assetsPath = {
  gems: [
    basePaths.gems + 'susy-2.2.2/sass',
    basePaths.gems + 'breakpoint-2.7.1/stylesheets',
    
    basePaths.node_modules +  'typey/stylesheets'
  ],
   node_modules: [
       //Ajoutés avec les gems pour simplifier     
       
  ],
  javascript: [
    '',
       
  ]
};

and my task, can I use multiple path as includePath like I would ?:

gulp.task('sasscompil', function () {
    return gulp.src(basePaths.src)
            .pipe(plugins.sourcemaps.init())
            .pipe(plugins.sass({
                noCache: true,
                bundleExec: true,
                includePaths: [].concat(
                        assetsPath.gems,
                        assetsPath.node_modules,
                        folderPaths.styles.src
                        ),
                sourceMap: true,
                outputStyle: 'compressed'
                
            })...

[webmasterpf]

Changing paths like this:
in application.scss:
@import './node_modules/typey/stylesheets/_typey.scss';

in gulpfile.js:
basePaths.node_modules + 'typey/stylesheets/_typey.scss'

:/

[webmasterpf]

Ok fix my issue by modifying the path in @import like this :
@import '../node_modules/typey/stylesheets/_typey.scss';
and use mixin like it does:

h2 {
    	@include font-size(m);
	}

👍