improve CSS source map handling

Author: yyx990803

lib/loader.js

@@ -3,6 +3,7 @@ var assign = require('object-assign')
 var selectorPath = require.resolve('./selector')
 var parserPath = require.resolve('./parser')
 var hash = require('hash-sum')
+var path = require('path')
 
 var defaultLang = {
   template: 'html',
@@ -29,7 +30,9 @@ module.exports = function (content) {
   var output = ''
   var options = this.options.vue || {}
   var vueUrl = loaderUtils.getRemainingRequest(this)
-  var moduleId = '_v-' + hash(this.resourcePath)
+  var filePath = this.resourcePath
+  var fileName = path.basename(filePath)
+  var moduleId = '_v-' + hash(filePath)
 
   // respect user babel options
   if (this.options.babel) {
@@ -102,11 +105,12 @@ module.exports = function (content) {
   }
 
   function getRewriter (type, scoped) {
+    var meta = '?id=' + moduleId + '&file=' + fileName
     switch (type) {
     case 'template':
-      return scoped ? (rewriters.template + '?id=' + moduleId + '!') : ''
+      return scoped ? (rewriters.template + meta + '!') : ''
     case 'style':
-      return rewriters.style + '?id=' + moduleId + (scoped ? '&scoped=true!' : '!')
+      return rewriters.style + meta + (scoped ? '&scoped=true!' : '!')
     default:
       return ''
     }

lib/style-rewriter.js

@@ -56,7 +56,7 @@ module.exports = function (css, map) {
   }
 
   // postcss options, for source maps
-  var file = loaderUtils.getRemainingRequest(this)
+  var file = this.resourcePath
   var opts
   opts = {
     from: file,
@@ -74,7 +74,11 @@ module.exports = function (css, map) {
   postcss(plugins)
     .process(css, opts)
     .then(function (result) {
-      cb(null, result.css, result.map)
+      var map = JSON.parse(result.map.toString())
+      // ensure we give the style source a unique name
+      // so that Webpack doesn't get confused
+      map.sources[0] = query.file + '.style'
+      cb(null, result.css, map)
     })
     .catch(function (e) {
       console.log(e)