title: How do I use /deep/ or >>> or ::v-deep in Vue.js?
body: <p>So, I've read <a href="https://vue-loader.vuejs.org/en/features/scoped-css.html" rel="noreferrer">here</a> that in Vue.js, you can use <code>/deep/</code> or <code>&gt;&gt;&gt;</code> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn't work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:</p>
  <p><strong>home.vue:</strong></p>
  <pre><code>&lt;style lang=&quot;css&quot; scoped&gt;
  .autocomplete &gt;&gt;&gt; .autocomplete-input 
  {
  // ...
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>generated css:</strong></p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  .autocomplete &gt;&gt;&gt; .autocomplete-input[data-v-2bda0c9a]
  {
  //...
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>what I want:</strong></p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  .autocomplete[data-v-2bda0c9a] .autocomplete-input
  {
  //...
  }
  &lt;/style&gt;
  </code></pre>
  <p>My webpack configuration pertaining to <code>vue-loader</code> looks like this:</p>
  <pre><code>// ...
  {
      test: /\.vue$/,
      loader: &quot;vue-loader&quot;,
      options: {
          loaders: {
              scss: &quot;vue-style-loader!css-loader!sass-loader&quot;
          }
      }
  }
  // ...
  </code></pre>
  <p>So my question is, how do I get this <code>&gt;&gt;&gt;</code> operator to work?</p>
  <p>I've already found <a href="https://stackoverflow.com/a/46964259/3508956">this</a> answer, but I'm doing exactly that and it doesn't work...</p>