mark and resolve dependencies about sass-loader HOT 33 CLOSED

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

from sass-loader.

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

from sass-loader.

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.

from sass-loader.

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.

from sass-loader.

@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 😄

from sass-loader.

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

from sass-loader.

Cool!

from sass-loader.

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

from sass-loader.

@jhnns, awesome!

from sass-loader.

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

from sass-loader.

😄 yeah

from sass-loader.

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

from sass-loader.

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

from sass-loader.

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

from sass-loader.

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

from sass-loader.

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.

from sass-loader.

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

from sass-loader.

Yup!

from sass-loader.

It got released today can we get this in.

from sass-loader.

i'm on it!

from sass-loader.

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

from sass-loader.

Nice! 👍

from sass-loader.

Awesome!

from sass-loader.

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?

from sass-loader.

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?

from sass-loader.

@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.

from sass-loader.

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?

from sass-loader.

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

from sass-loader.

@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.

from sass-loader.

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.

from sass-loader.

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

from sass-loader.

Yep #22 😀

from sass-loader.

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

from sass-loader.