title: Vue custom import css (sass) file
body: <p>In Vue I have a component something to below:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="scss"&gt;
    .custom {
      @import "http://example.com/assets/css/style.css";
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>I have an <code>options.json</code> file that can be used to set a custom CSS URL. So I can set the CSS URL to anything. How do I implement that?</p>
  
  <p><strong>Dreamcode</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;style lang="scss"&gt;
    .custom {
      @import this.options.css;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>I know my way around variables in Vue. The tricky part for me is that the are used inside <code>&lt;template&gt;</code> or <code>&lt;script&gt;</code>, not inside <code>&lt;style&gt;</code>.</p>