fix scoped css for style with src import

Author: yyx990803

lib/loader.js

@@ -2,6 +2,7 @@ var loaderUtils = require('loader-utils')
 var assign = require('object-assign')
 var selectorPath = require.resolve('./selector')
 var parserPath = require.resolve('./parser')
+var hash = require('hash-sum')
 
 var defaultLang = {
   template: 'html',
@@ -28,6 +29,7 @@ module.exports = function (content) {
   var output = ''
   var options = this.options.vue || {}
   var vueUrl = loaderUtils.getRemainingRequest(this)
+  var moduleId = '_v-' + hash(this.resourcePath)
 
   // respect user babel options
   if (this.options.babel) {
@@ -98,9 +100,9 @@ module.exports = function (content) {
   function getRewriter (type, scoped) {
     switch (type) {
     case 'template':
-      return scoped ? (rewriters.template + '!') : ''
+      return scoped ? (rewriters.template + '?id=' + moduleId + '!') : ''
     case 'style':
-      return rewriters.style + (scoped ? '?scoped=true!' : '!')
+      return rewriters.style + '?id=' + moduleId + (scoped ? '&scoped=true!' : '!')
     default:
       return ''
     }

lib/style-rewriter.js

@@ -1,6 +1,5 @@
 var postcss = require('postcss')
 var selectorParser = require('postcss-selector-parser')
-var hash = require('hash-sum')
 var loaderUtils = require('loader-utils')
 var assign = require('object-assign')
 
@@ -71,7 +70,7 @@ module.exports = function (css, map) {
     opts.map.prev = map
   }
 
-  currentId = '_v-' + hash(this.resourcePath)
+  currentId = query.id
   postcss(plugins)
     .process(css, opts)
     .then(function (result) {

lib/template-rewriter.js

@@ -1,11 +1,12 @@
 var parse5 = require('parse5')
 var parser = new parse5.Parser()
 var serializer = new parse5.Serializer()
-var hash = require('hash-sum')
+var loaderUtils = require('loader-utils')
 
 module.exports = function (html) {
   this.cacheable()
-  var id = '_v-' + hash(this.resourcePath)
+  var query = loaderUtils.parseQuery(this.query)
+  var id = query.id
   var tree = parser.parseFragment(html)
   walk(tree, function (node) {
     if (node.attrs) {

test/test.js

@@ -115,7 +115,7 @@ describe('vue-loader', function () {
       var styles = window.document.querySelectorAll('style')
       expect(styles[0].textContent).to.contain('h1 { color: red; }')
       // import with scoped
-      var id = '_v-' + hash(require.resolve('./fixtures/import-scoped.css'))
+      var id = '_v-' + hash(require.resolve('./fixtures/import.vue'))
       expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green; }')
       done()
     })