built-in support for CSS extraction with extractCSS option

Author: yyx990803

lib/loader.js

@@ -5,7 +5,7 @@ var genId = require('./utils/gen-id')
 var querystring = require('querystring')
 var loaderUtils = require('loader-utils')
 var normalize = require('./utils/normalize')
-var hasLoader = require('./utils/has-loader')
+var tryRequire = require('./utils/try-require')
 
 // internal lib loaders
 var selectorPath = normalize.lib('selector')
@@ -19,8 +19,8 @@ var styleLoaderPath = normalize.dep('vue-style-loader')
 var hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
 
 // check whether default js loader exists
-var hasBabel = hasLoader('babel')
-var hasBuble = hasLoader('buble')
+var hasBabel = !!tryRequire('babel-loader')
+var hasBuble = !!tryRequire('buble-loader')
 
 var rewriterInjectRE = /\b(css(?:-loader)?(?:\?[^!]+)?)(?:!|$)/
 
@@ -83,7 +83,9 @@ module.exports = function (content) {
 
   var defaultLoaders = {
     html: templateCompilerPath + templateCompilerOptions,
-    css: styleLoaderPath + '!' + 'css-loader' + cssLoaderOptions,
+    css: options.extractCSS
+      ? getCSSExtractLoader()
+      : styleLoaderPath + '!' + 'css-loader' + cssLoaderOptions,
     js: hasBuble ? ('buble-loader' + bubleOptions) : hasBabel ? 'babel-loader' : ''
   }
 
@@ -190,19 +192,29 @@ module.exports = function (content) {
 
   function getRawLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
-    var loader = loaders[lang]
 
     var styleCompiler = ''
     if (type === 'styles') {
+      // style compiler that needs to be applied for all styles
       styleCompiler = styleCompilerPath + '?' + JSON.stringify({
         // a marker for vue-style-loader to know that this is an import from a vue file
         vue: true,
         id: moduleId,
         scoped: !!scoped,
         hasInlineConfig: !!query.postcss
       }) + '!'
+      // normalize scss/sass
+      if (lang === 'sass') {
+        lang = 'sass?indentedSyntax'
+      } else if (lang === 'scss') {
+        lang = 'sass'
+      }
     }
 
+    var loader = options.extractCSS
+      ? loaders[lang] || getCSSExtractLoader(lang)
+      : loaders[lang]
+
     var injectString = (type === 'script' && query.inject)
       ? 'inject-loader!'
       : ''
@@ -252,7 +264,7 @@ module.exports = function (content) {
 
   // sass => sass-loader
   // sass-loader => sass-loader
-  // sass?indentedsyntax!css => sass-loader?indentedSyntax!css-loader
+  // sass?indentedSyntax!css => sass-loader?indentedSyntax!css-loader
   function ensureLoader (lang) {
     return lang.split('!').map(function (loader) {
       return loader.replace(/^([\w-]+)(\?.*)?/, function (_, name, query) {
@@ -275,6 +287,32 @@ module.exports = function (content) {
     }
   }
 
+  function getCSSExtractLoader (lang) {
+    var extract
+    var op = options.extractCSS
+    // extractCSS option is an instance of ExtractTextPlugin
+    if (typeof op.extract === 'function') {
+      extract = op.extract
+    } else {
+      var plugin = tryRequire('extract-text-webpack-plugin')
+      if (!plugin) {
+        throw new Error(
+          '[vue-loader] extractCSS: true requires extract-text-webpack-plugin ' +
+          'as a peer dependency.'
+        )
+      } else {
+        extract = plugin.extract
+      }
+    }
+    var langLoader = lang
+      ? ensureBang(ensureLoader(lang))
+      : ''
+    return extract({
+      use: 'css-loader' + cssLoaderOptions + '!' + langLoader,
+      fallback: 'vue-style-loader'
+    })
+  }
+
   var output = ''
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })

lib/utils/has-loader.js

@@ -0,0 +1,16 @@
+var fs = require('fs')
+var path = require('path')
+var cwd = process.cwd()
+
+// attempts to first require a dep using projects cwd (when vue-loader is linked)
+// then try a normal require.
+module.exports = function tryRequire (dep) {
+  var cwdPath = path.resolve(cwd, 'node_modules', dep)
+  if (fs.existsSync(cwdPath)) {
+    return require(cwdPath)
+  } else {
+    try {
+      return require(dep)
+    } catch (e) {}
+  }
+}