revelrylabs / sassy-npm-importer

Import SASS from npm via a customizable prefix.
MIT License
18 stars 2 forks source link

'options.prefix must be string' error when used on the command line. #1

Closed jefftherobot closed 6 years ago

jefftherobot commented 7 years ago

node-sass --importer ./node_modules/sassy-npm-importer -o dist/css src/scss/main.scss

Throws an error. Is there a recommended way to use this on the command line?

node -v
v4.4.5

npm -v
2.15.5

npm list --depth=0

├── bourbon@4.2.7
├── breakpoint-sass@2.7.0
├── jspm@0.17.0-beta.29
├── node-sass@3.10.1
├── node-sass-globbing@0.0.23
├── normalize.css@5.0.0
├── npm-run-all@3.1.0
├── sassy-npm-importer@2.0.0
└── susy@2.2.12
mklemme commented 7 years ago

@jefftherobot I'm using create-react-app, so I didn't have direct access to the node-sass config. Got the command line option working last night, so I think I can offer some configuration advice:

From the node-sass docs on importers:

Also, note --importer takes the (absolute or relative to pwd) path to a js file, which needs to have a default module.exports set to the importer function. [example importer]

So then the importer.js file should look like:

// ./utils/scss_importer.js
var createImporter = require('sassy-npm-importer');
module.exports = createImporter({prefix: '~/', debug: true})

And hooking the importer in via the --importer flag:

// package.json
"scripts": {
    "build-css": "node-sass --importer utils/scss_loader.js src/ -o src/",
  }

I'm using the normalise.scss lib, so this is how I include it into my project:

// src/styles/lib/normalize.scss
@import "~/normalize-scss/sass/normalize";
@include normalize();

@jwietelmann I read the article for this project here which says that the cli option is available but there isnt any documentation to set this up in the readme. Mind if I open a pr to add the above config for people who are using the command line setup? Create-react-app hides all the config files so the example in the readme doesnt work.

Appreciate the project! <3

jwietelmann commented 7 years ago

@mklemme Glad you figured it out! I think the assertion about the CLI from the article may have been made in error. Rather than update the README, I was thinking we might perhaps change the API and do a major version bump so that the main module looks like:

function createImporter(...) {...}
const defaultImporter = createImporter()
defaultImporter.configure = createImporter
module.exports = defaultImporter

So we'd be exporting a default-configured importer which could be used with the CLI:

node-sass --importer node_modules/sassy-npm-importer/index.js src/ -o src/

Or programmatically with defaults:

const importer = require('sassy-npm-importer')

Or programmatically with configuration:

const importer = require('sassy-npm-importer').configure({prefix: '~/'})

Of course, we could also update the README with a section on how to make a configured importer usable on the CLI. I guess what I'm saying is that I'd be interested in one or both pull requests.