title: How to @import external SCSS properly with webpack and Vue.js?
body: <p>As in Material Component Web's example, I want to be able to import SCSS from my <code>node_modules</code> like this:</p>
  
  <pre><code>@import '@material/elevation/mdc-elevation';
  </code></pre>
  
  <p>However, I'm getting this error message when trying to run the webpack build:</p>
  
  <pre><code>File to import not found or unreadable: @material/elevation/mdc-elevation.
  </code></pre>
  
  <p><code>@import './~/@material/elevation/mdc-elevation.scss';</code> doesn't work either.</p>
  
  <p>I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.</p>
  
  <p><strong>What did they do in <a href="https://github.com/material-components/material-components-web" rel="noreferrer">Material Components Web</a>'s <a href="https://github.com/material-components/material-components-web/tree/master/framework-examples/vue" rel="noreferrer">Vue.js example</a> in order to make it work?</strong></p>
  
  <p>Here's my <a href="https://hastebin.com/omosazecay" rel="noreferrer">npm-debug.log</a> in case you need it.
  And here's the corresponding Git repository: <a href="https://github.com/sk22/spg-tinf-sem03/tree/master/proj01" rel="noreferrer">sk22/spg-tinf-sem03/proj01</a></p>
  
  <p>Thanks in advance!</p>
  
  <p>Edit: I want to be able to import the <strong>scss</strong> files, not the compiled css.</p>