feat: allow enfoce extract css in development

close #2002

BREAKING CHANGE: setting css.extract to true will now force extraction in development

Author: yyx990803

docs/config/README.md

@@ -198,16 +198,16 @@ module.exports = {
 
 ### css.extract
 
-- Type: `boolean`
-- Default: `true` (in production mode, always `false` otherwise)
+- Type: `boolean | Object`
+- Default: `true` in production, `false` in development
 
   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).
+  This is always disabled 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 mode since it is incompatible with CSS hot reloading. However, you can still enforce extraction in all cases by explicitly setting the value to `true`.
 
 ### css.sourceMap
 

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

@@ -12,17 +12,17 @@ const findExisting = (context, files) => {
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const getAssetPath = require('../util/getAssetPath')
+    const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
+    const isProd = process.env.NODE_ENV === 'production'
 
     const {
       modules = false,
-      extract = true,
+      extract = isProd,
       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 = extract !== false && !shadowMode
     const filename = getAssetPath(
       options,
       `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`,