title: Vue 2 component styles without Vue loader
body: <p>Considering that there is single file component (as <a href="https://vue-loader.vuejs.org/en/features/scoped-css.html" rel="noreferrer">shown in the guide</a>),</p>
  
  <pre><code>&lt;style&gt;
  .example {
    color: red;
  }
  &lt;/style&gt;
  
  &lt;template&gt;
    &lt;div class="example"&gt;hi&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>How can the same thing be done without Vue loader in non-modular ES5/ES6 environment?</p>
  
  <p>Considering that the style is scoped,</p>
  
  <pre><code>&lt;style scoped&gt;
  .example {
    color: red;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Is there a way to implement scoped CSS in non-modular environment, too? If there's none, is there a way to implement it in modular environment (Webpack), but without Vue loader and custom .vue format?</p>