scoped css support

Author: yyx990803

lib/loader.js

@@ -1,7 +1,6 @@
 var loaderUtils = require('loader-utils')
 var assign = require('object-assign')
 var parse = require('./parser')
-var selectorPath = require.resolve('./selector')
 var hash = require('hash-sum')
 var path = require('path')
 
@@ -12,15 +11,12 @@ var defaultLang = {
 }
 
 var rewriterInjectRE = /\b(css(-loader)?(\?[^!]+)?)(?:!|$)/
-var rewriters = {
-  styles: require.resolve('./style-rewriter')
-}
-
-var templateLoader = require.resolve('./template-loader')
+var selectorPath = 'vue-loader/lib/selector'
+var templateLoader = 'vue-loader/lib/template-loader'
 
 module.exports = function (content) {
   var defaultLoaders = {
-    html: require.resolve('./template-compiler'),
+    html: 'vue-loader/lib/template-compiler',
     css: 'vue-style-loader!css-loader',
     js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false'
   }
@@ -32,6 +28,7 @@ module.exports = function (content) {
   var filePath = this.resourcePath
   var fileName = path.basename(filePath)
   var moduleId = '_v-' + hash(filePath)
+  var styleRewriter = 'vue-loader/lib/style-rewriter?id=' + moduleId
 
   // respect user babel options
   if (this.options.babel) {
@@ -88,7 +85,7 @@ module.exports = function (content) {
   function getLoaderString (type, part, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
-    var rewriter = getRewriter(type, scoped)
+    var rewriter = type === 'styles' ? styleRewriter + (scoped ? '&scoped=true!' : '!') : ''
     var injectString = (type === 'script' && query.inject) ? 'inject!' : ''
     if (loader !== undefined) {
       // inject rewriter before css/html loader for
@@ -114,18 +111,6 @@ module.exports = function (content) {
     }
   }
 
-  function getRewriter (type, scoped) {
-    var meta = '?id=' + moduleId
-    switch (type) {
-      case 'template':
-        return scoped ? (rewriters.template + meta + '!') : ''
-      case 'style':
-        return rewriters.style + (scoped ? meta + '&scoped=true!' : '!')
-      default:
-        return ''
-    }
-  }
-
   function getSelectorString (type, index) {
     return selectorPath +
       '?type=' + type +
@@ -141,13 +126,13 @@ module.exports = function (content) {
   }
 
   var parts = parse(content, fileName, this.sourceMap)
-  var hasLocalStyles = false
+  var hasScoped = false
   var output = ''
 
   // add requires for styles
   parts.styles.forEach(function (style, i) {
     var scoped = style.scoped
-    if (scoped) hasLocalStyles = true
+    if (scoped) hasScoped = true
     output += style.src
       ? getRequireForImport('styles', style.src, scoped)
       : getRequire('styles', style, i, scoped)
@@ -184,8 +169,8 @@ module.exports = function (content) {
   if (template) {
     output += 'var __vue_template__ = ' + (
       template.src
-        ? getRequireForImport('template', template, hasLocalStyles)
-        : getRequire('template', template, null, hasLocalStyles)
+        ? getRequireForImport('template', template)
+        : getRequire('template', template)
     )
     // attach render functions to exported options
     exports +=
@@ -194,6 +179,10 @@ module.exports = function (content) {
         ': __exports__)\n' +
       '__vue_options__.render = __vue_template__.render\n' +
       '__vue_options__.staticRenderFns = __vue_template__.staticRenderFns\n'
+    // attach scoped id
+    if (hasScoped) {
+      exports += '__vue_options__._scopeId = "' + moduleId + '"\n'
+    }
   }
 
   if (!query.inject) {