anarh / node-sass-import Goto Github PK

Most front-end npm pacakges use the "main" field in their package.json to point to their main JS file. The css "entry point" us usually "style", as used by bootstrap or "style" as well as "sass", as used by bootstrap-sass.

package.json

{
  "name": "baukasten",
  "version": "0.1.0",
  "description": "Baukasten is a super thin boilerplate with only the basic stuff.",
  "scripts": {
    "sass": "node-sass --include-path scss assets/scss/main.scss assets/css/main.css --importer node_modules/node-sass-import",
    "prefix": "postcss --use autoprefixer -o assets/css/main.css assets/css/main.css",
    "build": "npm run sass && npm run prefix",
    "watch": "nodemon -e scss -x npm run build"
  },
  "keywords": [
    "boilerplate",
    "sass",
    "frontend"
  ],
  "author": "Dean Hidri",
  "license": "WTFPL",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "bemify": "^0.1.2",
    "node-sass": "^3.6.0",
    "node-sass-import": "^1.0.0",
    "nodemon": "^1.9.1",
    "postcss-cli-simple": "^1.0.1",
    "sass-module-importer": "^1.2.1",
    "sass-rem": "^1.2.2"
  }
}

Console Log:

G:\work\development\_github\baukasten\node_modules\node-sass-import\lib\node-sass-import.js:19
    if (err) throw err;
             ^

Error: Cannot find module 'sass-rem' from 'G:/work/development/_github/baukasten/assets/scss'
    at G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:46:17
    at process (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:173:43)
    at ondir (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:188:17)
    at load (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:69:43)
    at onex (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:92:31)
    at G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Currently I have the problem that the importer is not supporting '~' within the import path.
I used this so that my IDE (webstorm) recognizes the imports correctly.
Best thing would be if the importer either ignores (strips) it or uses it directly as a reference to node_modules.

working but not recognized as correct path from the IDE:
@import 'bootstrap/scss/bootstrap';
not working but correct path:
@import '~bootstrap/scss/bootstrap';

@import './components/*';

This works right now if it only matches one file. It should ideally return every .scss in there, concatenated (as { contents: '..' }). Of course this approach means you can't intermix .scss and .sass, but hey, you probably shouldn't anyway.

I'm trying to import normalize.css:

// src/input.scss
@import 'normalize.css';

Also trying this:

// src/input.scss
@import 'normalize.css/normalize';

But it resolves to:

// public/output.css
@import url(/Users/rsc/project/node_modules/normalize.css/normalize.css);

However, this works:

// src/input.scss
@import '../../node_modules/normalize.css/normalize';

I think that's @import not @include :)

Some packages only declare a .js file in main. Some packages also have a bower.json file, which declares it's own main. Currently this importer will try and evaluate a js file if it's in the main. Example: https://github.com/kenwheeler/slick

Slick.js also lists multiple files in it's main bower.json. (css,scss,and less). I tried
@import "slick-carousel/slick/slick.scss";
and it gave me a multiple file error:
It's not clear which file to import for '@import.

It'd be nice for the world to know about this! It's a feature that's been around node-sass-import for a while but it hasn't been documented.

Build hangs when I include this package.

Importing something like @import 'styles/my_partial_1.css'; fails with an error that reads Error: Cannot find module 'styles/my_partial_1.css' from <cwd>.