feat: allow enfoce extract css in development

close #2002 BREAKING CHANGE: setting css.extract to true will now force extraction in development
vuejs · Jul 31, 2018 · 686ec25 · 686ec25
1 parent d1a655c
commit 686ec25
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/docs/config/README.md b/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
 

diff --git a/packages/@vue/cli-service/lib/config/css.js b/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`,