Create-react-app: Enable CSS sourcemaps in development

[JaKXz]

Hi! Firstly, of course, thank you for this amazing project! 👏

I've seen the comments on sourcemaps: #109, #139, #494, #343, etc. but didn't see one about enabling CSS sourcemaps. I thought I'd make a PR first but I wanted to discuss first and get to grips with this repo structure.

Since there aren't breakpoints to worry about, this could be a very simple enhancement, e.g:

loader: 'style-loader!css-loader?'.concat(isProduction ? 'minimize' : 'sourceMap')

where const isProduction = process.env.NODE_ENV === 'production'. Apologies if I am duplicating / creating noise, I thought I'd searched thoroughly.

[gaearon]

Sounds perfectly reasonable. I would expect Webpack to already do it in DEV mode, does it not? Do you know why?

[JaKXz]

This is what I'm seeing ATM but I couldn't tell you why it's happening other than the config not being in place:

[mareksuscak]

@JaKXz FYI: Relative paths in source maps are buggy and you need to use an absolute public path which includes the server URL. Read more here.

Also, shall we use eval-source-map or cheap-eval-source-map devtool in development? Makes debugging a bit easier with the original source code.

EDIT: Let me know if you need help.

[gaearon]

Going to close since #591 didn’t work out, and I don’t know how else to implement this.

[JaKXz]

@gaearon it should probably be left open in that case... right?

[gaearon]

If you know of any possible alternative solution, sure. I’m just not aware of any.

[skaltenegger]

I got CSS sourcmaps and hot reloading working by following @mareksuscak's advice of changing my css loader in the webpack config to the following:

{ test: /.css$/, loader: 'style!css?sourceMap!postcss' },

And I can't complain about FOUC (flash of unstyled content) - so all good for development!

Hope that may help someone here! 😎

[stilllife00]

as @skaltenegger wrote the config for webpack 2 is

{
    test: /\.css$/,
    use: [
         require.resolve('style-loader'),
         {
             loader: require.resolve('css-loader'),
             options: {
                 importLoaders: 1,
                 sourceMap: 1
             },
          },
          ....