fix(webpack): fix css sourceMap option

[mikejpeters]

CSS source maps were not correctly generated because sourceMap option is case sensitive.
Also several workarounds are necessary with LoaderOptionsPlugin.

Fixes #2020

[hansl]

Are you sure you want to use __dirname here?

[mikejpeters]

It's the same value passed to context earlier in this file.

[sneridagh]

@hansl Solving this bug is quite important IMHO. Could you please take a closer look and propose an alternative if using __dirname is not acceptable?
I've tried the fix and it and works fine (at last).
Thanks a lot!

[hansl]

Alternative: project root.

The reason is the __dirname is the path to this file, but it might actually not be in the same directory than the project (for example, when you npm link the CLI). I think the correct solution is to use the project root.

Note that tutorial use __dirname because their webpack.config.js are at the root of their project. So in their case it's the valid thing to do.

Also, path.resolve(__dirname, '.') does nothing; just put the path in there.

[mikejpeters]

What I have done is just a simple workaround for the fact that loader options plugin makes the original webpack config inaccessible to the other plugins. Probably the most correct way to apply the workaround would be to assign the entire webpack config to a var, so that the values can be re-used like this:

var webpackConfig = {
  ...
  context: path.resolve(__dirname, './'),
  ...
};

webpackConfig.plugins.push(
  new webpack.LoaderOptionsPlugin({
    test: /\.(css|scss|sass|less|styl)$/,
    options: {
      postcss: [ autoprefixer() ],
      context: webpackConfig.context, // workaround
      output: {
        path: webpackConfig.output.path // workaround
      }
    }
  })
});

return webpackConfig;

I did not do this simply because I wanted to keep the changes I make in this merge request as simple as possible. That's why I copied the exact config values from higher up in this same file. If you want those values changed I think it should be a separate merge request.

See L41 and L44

[hansl]

Same as above.

[mikejpeters]

See my other comment please

[hansl]

Is it possible to add an e2e test so we avoid regressoins in the future?

[filipesilva]

Superseded by #3402, it includes the fixes found here and more work.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}