SyntaxError on @import

[haydenhancock]

When trying to use the modularscale-sass npm package I receive the following error on a basic Gulp task.

[23:37:11] Starting 'sass'...
[23:37:11] 'sass' errored after 12 ms
[23:37:11] C:\repos\foo2\node_modules\modularscale-sass\stylesheets\_modularscale.scss:2
@import 'modularscale/vars';
^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)

My gulpfile.js is

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('./scss/**/*.scss')
        .pipe(sass({
            includePaths: require('modularscale-sass').includePaths
        }).on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

My styles.scss is

@import '../node_modules/modularscale-sass/stylesheets/modularscale';

$modularscale: (
    base: 1em,
    ratio: 1.5
);

h4 {
    font-size: ms(3);
}

I've also tried @import 'modularscale'; as discussed in the documentation.

My package.json

{
  "name": "foo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.2",
    "modularscale-sass": "^3.0.8",
    "node-sass": "^4.9.4"
  }
}

I was able to get this to work using the 'Vanilla' install but I'd like to use the package. Has anyone else experienced this issue? Am I doing something wrong?

[ianhobbs]

It breaks if i use bower package manager. So i'm doing vanilla* install as well.

*vanilla aka download manually.

[scottkellum]

Thanks! It’s helpful to know this is an issue with Bower. I drafted a new release and hopefully it fixes the issue.

Please let me know if this fixes your issue.

[haydenhancock]

@scottkellum What's the best way to test this? Doesn't appear that 3.0.9 is available to me when installing via the command line.

On another note, it doesn't appear that Bower should be used anymore. Although they maintain it, they suggest using Yarn, Webpack, or Parcel. Is this something you have looked into?

Getting this updated to 3.0.9 on Yarn would be nice!

[scottkellum]

@haydenhancock You can find it here: https://yarnpkg.com/en/package/modularscale-sass and it is distributed through NPM. I didn’t version up to 3.0.9 anywhere but Bower.

Bower uses git tags to version up while NPM and rubygems require a publish command be run. I bungled Bower due to publishing before commuting changes (sorry about that).

Anyway, 3.0.8 everywhere else is the same as 3.0.9 for Bower.

[haydenhancock]

@scottkellum Thanks for the assistance. I switched to using Yarn and still receive the same error.

Below is my package.json file using Yarn:

{
  "name": "foo2",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.2",
    "modularscale-sass": "^3.0.8"
  },
  "dependencies": {}
}

[scottkellum]

Interesting, thanks! I’ll investigate in a bit