Adds css.alwaysExtract config option

docs/config/README.md

@@ -198,16 +198,16 @@ module.exports = {
 
 ### css.extract
 
-- Type: `boolean`
-- Default: `true` (in production mode, always `false` otherwise)
+- Type: `boolean | string`
+- Default: `'production'`
 
   Whether to extract CSS in your components into a standalone CSS files (instead of inlined in JavaScript and injected dynamically).
 
   This is also disabled by default when building as web components (styles are inlined and injected into shadowRoot).
 
   When building as a library, you can also set this to `false` to avoid your users having to import the CSS themselves.
 
-  Extracting CSS is always disabled in `development` since it breaks Hot Module Replacement.
+  Extracting CSS is disabled by default in `development` since it breaks Hot Module Replacement, can be enabled by setting this to `true`.
 
 ### css.sourceMap
 

packages/@vue/cli-service/__tests__/css.spec.js

@@ -113,6 +113,19 @@ test('css.extract', () => {
   })
 })
 
+test('css.extract when development', () => {
+  const config = genConfig({
+    vue: {
+      css: {
+        extract: 'production'
+      }
+    }
+  }, 'development')
+  LANGS.forEach(lang => {
+    expect(findLoaders(config, lang)).not.toContain(extractLoaderPath)
+  })
+})
+
 test('css.sourceMap', () => {
   const config = genConfig({
     postcss: {},

packages/@vue/cli-service/lib/config/css.js

@@ -15,14 +15,14 @@ module.exports = (api, options) => {
 
     const {
       modules = false,
-      extract = true,
+      extract = 'production',
       sourceMap = false,
       loaderOptions = {}
     } = options.css || {}
 
     const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
     const isProd = process.env.NODE_ENV === 'production'
-    const shouldExtract = isProd && extract !== false && !shadowMode
+    const shouldExtract = ((!isProd && extract === true) || (isProd && (extract === true || extract === 'production'))) && !shadowMode
     const filename = getAssetPath(
       options,
       `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`,

packages/@vue/cli-service/lib/options.js

@@ -17,7 +17,7 @@ const schema = createSchema(joi => joi.object({
   // css
   css: joi.object({
     modules: joi.boolean(),
-    extract: joi.alternatives().try(joi.boolean(), joi.object()),
+    extract: joi.alternatives().try(joi.boolean(), joi.object(), joi.string().allow('production')),
     sourceMap: joi.boolean(),
     loaderOptions: joi.object({
       css: joi.object(),