diff --git a/src/index.js b/src/index.js
index 2eac6f79..d114469d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -991,16 +991,22 @@ class MiniCssExtractPlugin {
       const readableIdentifier = module.readableIdentifier(requestShortener);
       const startsWithAtRuleImport = /^@import url/.test(content);
 
+      let header;
+
       if (compilation.outputOptions.pathinfo) {
         // From https://github.com/webpack/webpack/blob/29eff8a74ecc2f87517b627dee451c2af9ed3f3f/lib/ModuleInfoHeaderPlugin.js#L191-L194
         const reqStr = readableIdentifier.replace(/\*\//g, "*_/");
         const reqStrStar = "*".repeat(reqStr.length);
         const headerStr = `/*!****${reqStrStar}****!*\\\n  !*** ${reqStr} ***!\n  \\****${reqStrStar}****/\n`;
 
-        content = headerStr + content;
+        header = new RawSource(headerStr);
       }
 
       if (startsWithAtRuleImport) {
+        if (typeof header !== "undefined") {
+          externalsSource.add(header);
+        }
+
         // HACK for IE
         // http://stackoverflow.com/a/14676665/1458162
         if (module.media) {
@@ -1013,6 +1019,10 @@ class MiniCssExtractPlugin {
         externalsSource.add(content);
         externalsSource.add("\n");
       } else {
+        if (typeof header !== "undefined") {
+          source.add(header);
+        }
+
         if (module.media) {
           source.add(`@media ${module.media} {\n`);
         }
diff --git a/test/cases/pathinfo-devtool-source-map/expected/main.css b/test/cases/pathinfo-devtool-source-map/expected/main.css
new file mode 100644
index 00000000..cb08fe17
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/expected/main.css
@@ -0,0 +1,23 @@
+/*!********************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./style.css ***!
+  \********************************************************************/
+body {
+  background: red;
+}
+
+/*!********************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./other.css ***!
+  \********************************************************************/
+body {
+  background: blue;
+}
+
+/*!********************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./extra.css ***!
+  \********************************************************************/
+body {
+  background: yellow;
+}
+
+
+/*# sourceMappingURL=main.css.map*/
\ No newline at end of file
diff --git a/test/cases/pathinfo-devtool-source-map/expected/main.css.map b/test/cases/pathinfo-devtool-source-map/expected/main.css.map
new file mode 100644
index 00000000..fb0ac34d
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/expected/main.css.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.css","mappings":";;;AAAA;EACE,eAAe;AACjB;;;;;ACFA;EACE,gBAAgB;AAClB;;;;;ACFA;EACE,kBAAkB;AACpB","sources":["webpack:///./style.css","webpack:///./other.css","webpack:///./extra.css"],"sourcesContent":["body {\n  background: red;\n}\n","body {\n  background: blue;\n}\n","body {\n  background: yellow;\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/test/cases/pathinfo-devtool-source-map/extra.css b/test/cases/pathinfo-devtool-source-map/extra.css
new file mode 100644
index 00000000..19f99652
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/extra.css
@@ -0,0 +1,3 @@
+body {
+  background: yellow;
+}
diff --git a/test/cases/pathinfo-devtool-source-map/index.js b/test/cases/pathinfo-devtool-source-map/index.js
new file mode 100644
index 00000000..938a4b6e
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/index.js
@@ -0,0 +1,3 @@
+import "./style.css";
+import "./other.css";
+import "./extra.css";
diff --git a/test/cases/pathinfo-devtool-source-map/other.css b/test/cases/pathinfo-devtool-source-map/other.css
new file mode 100644
index 00000000..ae844dcf
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/other.css
@@ -0,0 +1,3 @@
+body {
+  background: blue;
+}
diff --git a/test/cases/pathinfo-devtool-source-map/style.css b/test/cases/pathinfo-devtool-source-map/style.css
new file mode 100644
index 00000000..67ce83e4
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/style.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/test/cases/pathinfo-devtool-source-map/webpack.config.js b/test/cases/pathinfo-devtool-source-map/webpack.config.js
new file mode 100644
index 00000000..97f53b67
--- /dev/null
+++ b/test/cases/pathinfo-devtool-source-map/webpack.config.js
@@ -0,0 +1,22 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  devtool: "source-map",
+  output: {
+    pathinfo: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};