Allow webpack.extractText=false config to disable use of ExtractTextP…

…lugin

Closes #343

CHANGES.md

@@ -1,3 +1,7 @@
+## Changed
+
+- You can now set [`webpack.extractText` config](https://github.com/insin/nwb/blob/master/docs/Configuration.md#extracttext-object--boolean) to `false` to disable extraction of stylesheets in builds [[#343](https://github.com/insin/nwb/issues/343)]
+
 ## Dependencies
 
 - extract-text-webpack-plugin: v3.0.0-rc.2 → v3.0.0

docs/Configuration.md

@@ -86,7 +86,7 @@ The configuration object can include the following properties:
   - [`webpack.compat`](#compat-object) - enable Webpack compatibility tweaks for commonly-used modules
   - [`webpack.debug`](#debug-boolean) - create a more debuggable production build
   - [`webpack.define`](#define-object) - options for `DefinePlugin`, for replacing certain expressions with values
-  - [`webpack.extractText`](#extracttext-object) - options for `ExtractTextPlugin`
+  - [`webpack.extractText`](#extracttext-object--boolean) - options for `ExtractTextPlugin`
   - [`webpack.hoisting`](#hoisting-boolean) - enable partial scope hoisting with Webpack 3's `ModuleConcatenationPlugin`
   - [`webpack.html`](#html-object) - options for `HtmlPlugin`
   - [`webpack.install`](#install-object) - options for `NpmInstallPlugin`
@@ -469,10 +469,13 @@ module.exports = {
 }
 ```
 
-##### `extractText`: `Object`
+##### `extractText`: `Object | Boolean`
 
 Configures [options for `ExtractTextWebpackPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin#readme).
 
+
+Set to `false` to disable extraction of `.css` files in builds (in which case [`style-loader`](https://github.com/webpack-contrib/style-loader#readme) will handle injecting `<style>` tags at runtime, as it does when running the development server).
+
 ##### `hoisting`: `Boolean`
 
 Enables [partial scope hoisting](https://github.com/webpack/webpack/tree/master/examples/scope-hoisting#readme) with Webpack 3's `ModuleConcatenationPlugin`.

src/createWebpackConfig.js

@@ -215,7 +215,7 @@ export function createStyleLoaders(
     ))
   }
 
-  if (server) {
+  if (server || userWebpackConfig.extractText === false) {
     loaders.unshift(styleLoader)
     return loaders
   }
@@ -544,13 +544,14 @@ export function createPlugins(
   }
   // If we're not serving, we're creating a static build
   else {
-    // Extract CSS required as modules out into files
-    let cssFilename = production ? `[name].[contenthash:8].css` : '[name].css'
-    plugins.push(new ExtractTextPlugin({
-      allChunks: true,
-      filename: cssFilename,
-      ...userConfig.extractText,
-    }))
+    if (userConfig.extractText !== false) {
+      // Extract imported stylesheets out into .css files
+      plugins.push(new ExtractTextPlugin({
+        allChunks: true,
+        filename: production ? `[name].[contenthash:8].css` : '[name].css',
+        ...userConfig.extractText,
+      }))
+    }
 
     // Move modules imported from node_modules/ into a vendor chunk when enabled
     if (buildConfig.vendor) {