diff --git a/README.md b/README.md
index 3e6334a1..40245870 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,91 @@ Configure inside your `webpack.config.js`:
 
 Checkout [example setup](./example).
 
+### Extracting CSS
+
+If your Svelte components contain `<style>` tags, by default the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not ideal, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
+
+A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to the mix to output the css to a separate file.
+
+```javascript
+  ...
+  module: {
+    rules: [
+      ...
+      {
+        test: /\.(html|svelte)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            emitCss: true,
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader',
+        }),
+      },
+      ...
+    ]
+  },
+  ...
+  plugins: [
+    new ExtractTextPlugin('styles.css'),
+    ...
+  ]
+  ...
+```
+
+Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use `css: false`.
+
+### Source maps
+
+JavaScript source maps are enabled by default, you just have to use an appropriate [webpack devtool](https://webpack.js.org/configuration/devtool/).
+
+To enable CSS source maps, you'll need to use `emitCss` and pass the `sourceMap` option to the `css-loader`. The above config should look like this:
+
+```javascript
+module.exports = {
+    ...
+    devtool: "source-map", // any "source-map"-like devtool is possible
+    ...
+    module: {
+      rules: [
+        ...
+        {
+          test: /\.(html|svelte)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'svelte-loader',
+            options: {
+              emitCss: true,
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [{ loader: 'css-loader', options: { sourceMap: true } }],
+          }),
+        },
+        ...
+      ]
+    },
+    ...
+    plugins: [
+      new ExtractTextPlugin('styles.css'),
+      ...
+    ]
+    ...
+};
+```
+
+This should create an additional `styles.css.map` file.
 
 ## License
 
diff --git a/index.js b/index.js
index 6e82bbb3..0dc69817 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,8 @@
 const { basename, extname } = require('path');
 const { compile } = require('svelte');
 const { getOptions } = require('loader-utils');
+const { appendFileSync } = require('fs');
+const { fileSync } = require('tmp');
 
 function sanitize(input) {
 	return basename(input)
@@ -25,10 +27,19 @@ module.exports = function(source, map) {
 	options.shared =
 		options.format === 'es' && require.resolve('svelte/shared.js');
 
+	if (options.emitCss) options.css = false;
+
 	if (!options.name) options.name = capitalize(sanitize(options.filename));
 
 	try {
-		let { code, map } = compile(source, options);
+		let { code, map, css, cssMap } = compile(source, options);
+
+		if (options.emitCss && css) {
+			const tmpobj = fileSync({ postfix: '.css' });
+			css += '\n/*# sourceMappingURL=' + cssMap.toUrl() + '*/';
+			appendFileSync(tmpobj.name, css);
+			code = code + `\nrequire('${tmpobj.name}');\n`;
+		}
 
 		this.callback(null, code, map);
 	} catch (err) {
diff --git a/package-lock.json b/package-lock.json
index cd8ca112..0773a9bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1056,6 +1056,11 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1272,15 +1277,6 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -1292,6 +1288,15 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -1384,6 +1389,14 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
+    "tmp": {
+      "version": "0.0.31",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
+      "integrity": "sha1-jzirlDjhcxXl29izZX6L+yd65Kc=",
+      "requires": {
+        "os-tmpdir": "1.0.2"
+      }
+    },
     "tryit": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tryit/-/tryit-1.0.3.tgz",
diff --git a/package.json b/package.json
index cd6c8756..8833f51a 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "webpack-loader"
   ],
   "dependencies": {
-    "loader-utils": "^1.1.0"
+    "loader-utils": "^1.1.0",
+    "tmp": "0.0.31"
   },
   "devDependencies": {
     "chai": "^3.5.0",
diff --git a/test/loader.spec.js b/test/loader.spec.js
index a531b35a..5ebdaa4d 100644
--- a/test/loader.spec.js
+++ b/test/loader.spec.js
@@ -225,6 +225,34 @@ describe('loader', () => {
 				)
 			);
 		});
+
+		describe('emitCss', function() {
+			it(
+				'should configure emitCss=false (default)',
+				testLoader(
+					'test/fixtures/css.html',
+					function(err, code, map) {
+						expect(err).not.to.exist;
+
+						expect(code).not.to.match(/require\('.+\.css'\);/);
+					},
+					{}
+				)
+			);
+
+			it(
+				'should configure emitCss=true',
+				testLoader(
+					'test/fixtures/css.html',
+					function(err, code, map) {
+						expect(err).not.to.exist;
+
+						expect(code).to.match(/require\('.+\.css'\);/);
+					},
+					{ emitCss: true }
+				)
+			);
+		});
 	});
 });