0

I'm trying to compile my sass with node-sass using the following script in my package.json:

"node-sass": "node-sass --output-style compressed 'src/scss/styles.scss' 'dist/css/bundle.min.css'",

My styles.scss:

@import "bourbon";
@import "neat";

body {background: red;}

But when I run npm run node-sass I get the following error:

  "formatted": "Error: File to import not found or unreadable: bourbon\n       Parent style sheet: /Users/deangibson/Desktop/personal_site/src/scss/styles.scss\n        on line 1 of src/scss/styles.scss\n>> @import \"bourbon\";\n   ^\n",
  "message": "File to import not found or unreadable: bourbon\nParent style sheet: /Users/deangibson/Desktop/personal_site/src/scss/styles.scss",
  "column": 1,
  "line": 1,
  "file": "/Users/deangibson/Desktop/personal_site/src/scss/styles.scss",
  "status": 1
}

My project structure looks like this:

enter image description here

Shouldn't node just automatically check in the node_modules when it comes to dependencies? I don't understand what I'm doing wrong here...

1 Answer 1

4

Yes, node does automatically look for stuff you require in your JavaScript files from node_modules. You are however executing a command-line app node-sass and it does not do that.

You can provide --include-path to node-sass command line app like this (multiline for readability, needs to be on single line in package.json)

node-sass 
  --output-style compressed 
  --include-path node_modules/bourbon/app/assets/stylesheets/ 
  --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 
  'src/scss/styles.scss' 
  'dist/css/bundle.min.css'

If you write a render JavaScript file that is executed with node you can setup the includePath by merging the arrays exported by the bourbon modules when you require them.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.