Handle CSS imports correctly

[jhnns]

node-sass treats CSS imports this way:

If a file ending is provided...

...the import statement stays untouched, but the file contents are not included:

@import "./some-css-module.css";

becomes

@import url(./some-css-module.css);

If no file ending is provided...

...it is treated as scss and included.

The sass-loader should treat it the same way. Currently the sass-loader outputs an absolute path to the CSS file which is pretty useless.

[jorrit]

What is the webpack.config.js in your case? Does extensions contain the empty string?

[rlucha]

+1 same here

[jsg2021]

Yep, this is what I was talking about in #101

Just a reminder, the css file cannot be just treated as scss... the url refs in the css file should be relative to that css file.

[jsg2021]

after looking into how sass does things, i actually am starting to think the behavior just needs to make sure the compiled sass has what the css/style loader needs to consume those references.

In webpack, is it the loader's responsibility to offer new imports to webpack to consume? or should the piped output from the sass loader into css-loader be sufficient?

[jhnns]

Could you check out the current master branch and check if it works for you? I've heavily refactored the import mechanism and need more tests.

[jhnns]

Fixed with 2.0.0

[jsg2021]

It looks like the CSS content is being interpreted as SCSS and using the same 'pwd' (for lack of a better term)

so a fonts css file with the content below looks at the main SCSS's path instead of the imported CSS's path and icomoon.woff/svg files get the lovely Cannot resolve 'file' or 'directory' ./icomoon.woff in /Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/scss ...when the file is actually not under that scss directory and is under ../fonts/icomoon/ which is where the css file is.

@font-face {
    font-family: 'icomoon';
    src: url(icomoon.woff) format('woff'),
        url(icomoon.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

[jsg2021]

Oh, wait... leaving the .css extension on the import, webpack is now correctly handling them. Sweet. :) looks good!