Skip to content

Prevent sourceMapUrl from appearing on extracted css file #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
manatarms opened this issue Jul 31, 2018 · 5 comments · Fixed by #650
Closed

Prevent sourceMapUrl from appearing on extracted css file #223

manatarms opened this issue Jul 31, 2018 · 5 comments · Fixed by #650

Comments

@manatarms
Copy link

manatarms commented Jul 31, 2018

I am importing a css file in my app entry.js. I want to prevent the sourceMapUrl from appearing on the extracted css file. I've tried passing sourceMap : false to both css-loader and mini-css-extract-plugin, but it still generates the sourceMappingURL.

Here are the relevant snippets of my config

new MiniCssExtractPlugin({
    filename: isDev
      ? '../static/stylesheets/core.css'
      : '../static/stylesheets/core.[contenthash].css'
})
rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              sourceMap: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: false
            }
       }
]

Expected output:
No sourceMapUrl in the extracted css file.

Actual output:
/*# sourceMappingURL=../../../../entry.map*/

Version info:
webpack : 4.16.3
css-loader : 0.28.11
mini-css-extract-plugin : 0.4.1

Any help is appreciated. Thanks!

@michael-ciniawsky
Copy link
Member

Please provide a small reproduction repo

@alexander-akait
Copy link
Member

alexander-akait commented Dec 13, 2018

Bug in webpack, he always generate source map when you use devtool: "source-map" even source map doesn't exists, workaround set devtool to false when you don't need source maps

@sokra
Copy link
Member

sokra commented Jul 17, 2019

as workaround you can use devtool: false and the SourceMapDevToolPlugin directly and specify a different test option, i. e. /\.js$/

@sokra
Copy link
Member

sokra commented Jul 17, 2019

there is a if(sourceMap) in the SourceMapDevToolPlugin: https://github.com/webpack/webpack/blob/master/lib/SourceMapDevToolPlugin.js#L85

MCEP uses OriginalSource which also has a source mapping. So even if the css-loader doesn't emit a SourceMap to the original files, MCEP still generates a SourceMap to "unbundle" the parts. With "unbundle" I mean: The emitted CSS file is a concatenation of multiple inner CSS files. The emitted SourceMap splits the concatenated file into the inner files.

You could add an sourceMap: false option to MCEP, which uses RawSource instead of OriginalSource. The RawSource has no mappings and the SourceMapDevToolPlugin would not generate a .map file.

@manatarms
Copy link
Author

I ended up working around this by post processing and replacing the sourceMap url once the file was generated. It's not ideal, but it worked.
Here's the plugin and code I used

  new ReplaceInFileWebpackPlugin([
    {
      dir: '../static/stylesheets/',
      test: /core\.[a-f0-9]+\.css$/,
      rules: [
        {
          search: /\/\*# sourceMappingURL=.+\*\/$/,
          replace: ''
        }
      ]
    }
  ])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants