fix(lib): ensure webpack inline loaders stay prefixed

when making a component path relative

fix https://github.com/nuxt/nuxt.js/issues/3314

lib/common/utils.js

@@ -153,6 +153,13 @@ export const relativeTo = function relativeTo() {
   let args = Array.prototype.slice.apply(arguments)
   let dir = args.shift()
 
+  // Keep webpack inline loader intact
+  if (args[0].indexOf('!') !== -1) {
+    const loaders = args.shift().split('!')
+
+    return loaders.concat(relativeTo(dir, loaders.pop(), ...args)).join('!')
+  }
+
   // Resolve path
   let _path = r(...args)
 

test/unit/utils.test.js

@@ -216,6 +216,17 @@ describe('utils', () => {
     ])
     expect(routes).toMatchObject([ '/login', '/about', '', '/post' ])
   })
+
+  describe('relativeTo', () => {
+    test('makes path relative to dir', () => {
+      expect(Utils.relativeTo('/foo/bar', '/foo/baz')).toBe('../baz')
+    })
+
+    test('keeps webpack inline loaders prepended', () => {
+      expect(Utils.relativeTo('/foo/bar', 'loader1!loader2!/foo/baz'))
+        .toBe('loader1!loader2!../baz')
+    })
+  })
 })
 
 test('createRoutes should allow snake case routes', () => {