mark and resolve dependencies

[jtangelder]

webpack/webpack#157

[jhnns]

Does node-sass provide an api to intercept the compilation process? @sokra is using the Less-Parser in the less-loader

[maspwr]

Is this currently being worked on or is it blocked by something?

[jhnns]

I've made some investigation and it seems like libsass (which node-sass is based on) is not providing a way to intercept the loading of files. This means that we can't resolve files by webpack's algorithm.

At least libsass is exposing an array of all imported files which can be marked as dependency. Unfortunately node-sass isn't exposing this yet.

[maspwr]

Thanks @jhnns. So what does that mean practically for sass-loader? @import will not use webpack's pipeline (unless it is a CSS import that gets passed to css-loader). What else?

It would probably be nice to add a caveat to the documentation for this loader until something changes with libsass.

[jhnns]

@import will not use webpack's pipeline (unless it is a CSS import that gets passed to css-loader).

Exactly. You can raise your voice here, maybe they'll implement it.

What else?

The watch-mode won't work for sass-modules since webpack doesn't know about the dependencies. If node-sass exposed the array of all imported files, at least this could be fixed. Until then a third-party watcher which simply watches all scss-files can be used.

It would probably be nice to add a caveat to the documentation for this loader

Yep 👍 . Creating a pull-request of the readme is very easy on GitHub. Just click the edit-button 😄

[maspwr]

Thanks, @jhnns. Check out #5 and add to it if you want.

[jhnns]

Cool!

[jhnns]

Btw: I'm currently working on this at node-sass. You can watch the progress there.

[maspwr]

@jhnns, awesome!

[jhnns]

includedFiles landed in node-sass today, so marking dependencies is now possible.

[sokra]

😄 yeah

[jtangelder]

ok! i'll take a look at it tomorrow! Hope i got some time left to add this...

[jhnns]

It seems like there is an issue on macs...

[jtangelder]

Hm, i cant get your clone to work either on my Ubuntu laptop....

...........npm install output................
npm http ..............


> [email protected] install /home/jorik/work/sass-loader/node_modules/node-sass
> node build.js

make: Entering directory `/home/jorik/work/sass-loader/node_modules/node-sass/build'
  CXX(target) Release/obj.target/binding/binding.o
In file included from ../binding.cpp:6:0:
../sass_context_wrapper.h:1:36: fatal error: libsass/sass_interface.h: No such file or directory
 #include "libsass/sass_interface.h"
                                    ^
compilation terminated.
make: *** [Release/obj.target/binding/binding.o] Error 1
make: Leaving directory `/home/jorik/work/sass-loader/node_modules/node-sass/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:797:12)
gyp ERR! System Linux 3.13.0-24-generic
gyp ERR! command "node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/jorik/work/sass-loader/node_modules/node-sass
gyp ERR! node -v v0.10.26
gyp ERR! node-gyp -v v0.12.2
gyp ERR! not ok 
Build failed
npm ERR! [email protected] install: `node build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! System Linux 3.13.0-24-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/jorik/work/sass-loader
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/jorik/work/sass-loader/npm-debug.log
npm ERR! not ok code 0

[jhnns]

Have you initialized the submodule libsass? It seems like it can't find the header files:

../sass_context_wrapper.h:1:36: fatal error: libsass/sass_interface.h: No such file or directory

[jtangelder]

Yes that must be it. I only took a small look at it :-). I can try fix the issue, or give you some debug data, on my Mac at the office today.

[jtangelder]

I see that the issue is solved, could you give me a message when it is released?

[jhnns]

Yup!

[ryanseddon]

It got released today can we get this in.

[jtangelder]

i'm on it!

[jtangelder]

Released as 0.2.0, and on npm!
https://www.npmjs.org/package/sass-loader

[jhnns]

Nice! 👍

[maspwr]

Awesome!

[lukebrooker]

I think the readme needs to be updated to represent this update?

Also, one other question, How does this handle imports if the same file is "imported" twice? Does it only include it once?

[Chrazy]

I'm having problems with the loader when the build fails from an error in an import. When the imported file is saved (and the compile error is fixed) it won't build unless you save the main file (with all the imports). Something with the files not being resolved and just marking them as dependencies not being enough?

[jhnns]

@sokra ?
@lukebrooker This is completely handled by node-sass, but I assume that it is imported twice as this is sass' default behavior. However, there are hacks to avoid it.

[ryanseddon]

Given this sass file:

@import "Thing";
@import "OtherThing";

I import this css using the css-loader as I want it packaged up into my js file.

var css = require('css!sass!file-above');

Should the sass-loader take each of those imports and create another module that the parent module should reference? It doesn't do this and creates a string, I have lots of components imported more than once.

module.exports = "css{}" + __webpack_require__('Thing') + __webpack_require__('OtherThing');

How would I get sass-loader to do that? Is it possible?

[lukebrooker]

@ryanseddon This is one of the reasons I have started using rework & rework-npm instead of Sass.

[jhnns]

@ryanseddon This kind of modularity is currently not possible with any CSS preprocessor (LESS and SASS), because each compilation is self-contained and doesn't know about previous compilations. That's why every require() of a SASS or LESS file creates a complete standalone CSS file with all the duplicates.

However, LESS provides a way to import other LESS files without including the source which works quite well.

[swordsreversed]

So is this issue fixed? I can't use @import from my node_modules folder.

@import "twbs/sass/bootstrap.sass";

{ 
  test: /\.scss$/, 
  loader: 'style!css!sass?outputStyle=expanded&includePaths[]=' + 
  (path.resolve(__dirname, './node_modules/')) },
{

Also tried with the ~ at the start of the @import path.

Thanks.

[mrmurphy]

as mentioned previously, if this issue is fixed, shouldn't the readme be updated to reflect that all is well now?

[jhnns]

Yep #22 😀

[volkanunsal]

Looks like the issue the README references has been merged into the main line branch.