diff --git a/lib/style-compiler/plugins/scope-id.js b/lib/style-compiler/plugins/scope-id.js
index d0be6c101..20aba44a0 100644
--- a/lib/style-compiler/plugins/scope-id.js
+++ b/lib/style-compiler/plugins/scope-id.js
@@ -9,7 +9,7 @@ module.exports = postcss.plugin('add-id', function (opts) {
       if (!node.selector) {
         // handle media queries
         if (node.type === 'atrule') {
-          if (node.name === 'media') {
+          if (node.name === 'media' || node.name === 'supports') {
             node.each(rewriteSelector)
           } else if (node.name === 'keyframes') {
             // register keyframes
diff --git a/test/fixtures/supports-query.vue b/test/fixtures/supports-query.vue
new file mode 100644
index 000000000..88db49709
--- /dev/null
+++ b/test/fixtures/supports-query.vue
@@ -0,0 +1,7 @@
+<style scoped>
+@supports ( color: #000 ) {
+  .foo {
+    color: #000;
+  }
+}
+</style>
diff --git a/test/test.js b/test/test.js
index 65c74887f..00d3d84c0 100644
--- a/test/test.js
+++ b/test/test.js
@@ -309,6 +309,18 @@ describe('vue-loader', function () {
     })
   })
 
+  it('supports-query', done => {
+    test({
+      entry: './test/fixtures/supports-query.vue'
+    }, (window) => {
+      var style = window.document.querySelector('style').textContent
+      style = normalizeNewline(style)
+      var id = 'data-v-' + hash('vue-loader/test/fixtures/supports-query.vue')
+      expect(style).to.contain('@supports ( color: #000 ) {\n.foo[' + id + '] {\n    color: #000;\n}\n}')
+      done()
+    })
+  })
+
   it('extract CSS', done => {
     bundle({
       entry: './test/fixtures/extract-css.vue',