Cannot import CSS files

[jhnns]

#91 (comment)

[adamalbrecht]

+1

[elektronik2k5]

+1

[cmnstmntmn]

+1

[newtriks]

+1

[Undistraction]

+1

[malte-wessel]

+1

[lasekio]

+1!

[jorrit]

Can you try the changes in PR #116 to see if it is fixed?

[zallek]

+1

[kisenka]

+1

[jsg2021]

@jhnns I think this issue needs reopening.

in the example in #91 about my fonts.scss file... the compiled output does not include the contents of the .css files instead has a file-system absolute path in an @import url(...); statement.

See: (newlines added for readability)

@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/droid-serif/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/foundation-icons/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/open-sans/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/open-sans-condensed/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/stix/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/symbola/index.css);
@import url(/Users/jgrimes/Workspace/nti.web.mobile/src/main/resources/fonts/icomoon/style.css); 
...

Those file paths are correct (from the file system's perspective)... I would expect the contents of the css file to be inlined. (as sass-loader did in 0.4.x)

Update: I do not believe sass-loader inlined them before, I believe the loader offered the css files back to webpack to deal with them.

[jsg2021]

I think I understand some of this more...

Sass will compile @import "plain.css" into @import url(plain.css); and not inline it.

WebPack may not be given the opportunity to re-resolve the css file and pack it in.

[jsg2021]

@jhnns @jorrit any thoughts?

[jhnns]

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

[jsg2021]

So, CSS files are being imported. yay!

However, the references in them to fonts and images are not respecting the CSS path. (relative urls in plain css are relative to the css file's path)

[jsg2021]

Disregard. :) leaving the .css extension on the import statement makes it work as expected! :)

[jorrit]

Does anyone know why there is a difference?

[jsg2021]

@jorrit If my understanding is correct, not including an extension the loader looks for .sass, .scss and .css...but treats them as if they were sass. With an extension, it seem to be passing it to webpack (as it should be)

Perhaps, the css _without_ extension should log a warning letting the author know that this style of import is quirky. (And probably not what they intended)

[jhnns]

@jsg2021 When you add the .css extension, libsass does not include the file, it just turns it into @import url(..). When this is passed to the css-loader, all urls must be relative to the file which imports them. When you omit .css, libsass includes the file just like it was a .scss file. In this situation, all urls must be relative to the entry sass/scss file which was passed to the sass compiler.

This is how libsass handles it, the sass-loader is just imitating it.

[jsg2021]

@jhnns I think thats perfect.

[jschlieber]

When you add the .css extension, libsass does not include the file, it just turns it into @import url(..). When this is passed to the css-loader, all urls must be relative to the file which imports them. When you omit .css, libsass includes the file just like it was a .scss file. In this situation, all urls must be relative to the entry sass/scss file which was passed to the sass compiler.

@jhnns Is this still the expected behavoir? Because if I omit .css in my import statement the file is completely ignored. It works if I add .css but then I have the problem with the relative urls. I'm on sass-loader version 6.0.3...

[esr360]

I have a setup like this in my main .scss file:

// Sass librarys
@import '../../node_modules/spinners/stylesheets/spinners';

// CSS librarys
@import 'flickity.css'

Naturally the Sass libraries are relative to the Sass file they are imported into, but the CSS libraries are relative to the output CSS file. Above, flickity.css is a sibling stylesheet of the file it is imported into (on the server, of course).

Trying to compile the above with Webpack sass-loader results in the following error:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"importer":[null],"outputStyle":"expanded"}!./src/app.scss
Module not found: Error: Can't resolve './flickity.css' in '/Users/edmund/Projects/One-Nexus-Homepage/One-Nexus/src'
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"importer":[null],"outputStyle":"expanded"}!./src/app.scss 3:10-73

However, if I change the above to:

// Sass librarys
@import '../../node_modules/spinners/stylesheets/spinners';

// CSS librarys
@import '../../node_modules/flickity/dist/flickity.css';

It appears to work properly. I would like my app to not depend upon Webpack and compile with regular Sass - is there anyway to do this without modifying my .scss file, whilst also retaining the ability to use Webpack/sass-loader?

[bs-thomas]

I have the same issue. Wonder if this is being looked at.