CSS Source maps broken

[codepunkt]

See #48 for reference.

[NogsMPLS]

i wonder if this is also related to the Flash Of Unstyled Content that happens on refresh.

One thing I've found in my research for true isomorphic Local CSS, is that it seems like there is a different loader call for server vs. client.

check out https://github.com/jarsbe/book-shelf/tree/isomorphic/webpack and see the difference between server and browser config. specifically the modules.

[NogsMPLS]

yeah i think thats got something to do with it:

https://github.com/webpack/css-loader#local-scope

Note: For prerendering with extract-text-webpack-plugin you should use css-loader/locals instead of style-loader!css-loader in the prerendering bundle. It doesn't embed CSS but only exports the identifier mappings.

[codepunkt]

I don't know how the others see this - but for me this is a dealbreaker.

Would it be possible to revert this repo to a state where css source maps still worked?

[erikras]

That was before the local styles worked, and all the classNames were global (className="myButton", not className={styles.myButton}). Surely this source map thing is fixable. It just hasn't been a priority of mine to examine.

[NogsMPLS]

yeah looks like the solution has to do with having a prerender/server bundle and a clientside bundle: webpack-contrib/css-loader#59 (comment)

i don't know webpack well enough yet to suggest a good way to implement this in the current repo.

[NogsMPLS]

Good News Everyone!

sass-loader 2.0 just came out 30 minutes ago, and I've been testing it, and so far, it has fixed the source map problem!

[codepunkt]

Amazing!
Can you submit a PR?

[NogsMPLS]

yeah, I want to do a little more testing, but if everything looks good, I'll do a PR

[NogsMPLS]

hmm, well, npm run dev doesn't have source maps, but thats because it's not actually creating a separate css file, right? It just throws it into a <style> tag in the header.

Without using ExtractTextPlugin, like the repo does in prod, i'm not sure if source maps will work, but I'll keep looking into it. Though you might lose the benefit of hot reloading? Not sure.

prod build seems to work though

[codepunkt]

Thats a great first step in the right direction!
The <style> tags in the header do have sourcemapping-urls in dev-mode, though:

/*# sourceMappingURL=src/components/InfoBar.scss.map */

[erikras]

This is brilliant news!

[NogsMPLS]

i almost got it working on dev, paths are a little weird though, i think i can pretty it up a bit. hopefully a PR by end of day

[NogsMPLS]

got a PR that should hopefully close this. works on both PRD and DEV in my Windows 7 environment.

PRD source maps are much cleaner when traversing the directories in dev tools.

DEV source maps are there, and you can anvigate to them, but they are in like ../../../autoprefix-loader... because of the loader prefixes that need to be added when not using ExtractTextPlugin.

[NogsMPLS]

also, good news is that this is working with Hot Reloading in DEV too, so I can change the scss file in my IDE and see it move without refreshing in the browser.

[codepunkt]

Sounds amazing, looking forward to testing it! Thanks for the work you've put in!

[olalonde]

Would there be any way to make this work with the bootstrap css as well? It's useful sometimes to find out which variables bootstrap uses for a given class.