title: Getting import tilde (~) to work in a Visual Studio Asp.Net core angular template app
body: <p>I am currently attempting to get a Material design theme to import in my Angular 5 application, which, at the moment, is the Asp.Net Core/MVC Angular template found in Visual Studio 2017, upgraded to the latest version of Angular (5.2.1).</p>
  
  <p>I want to use the tilde method, as follows.</p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/indigo-pink.css';
  </code></pre>
  
  <p>I am using webpack. 
  I have an scss loader already installed. 
  I have renamed my app.component.css file to app.component.scss and updated the reference. 
  I have changed the encapsulation:</p>
  
  <pre><code>encapsulation: ViewEncapsulation.None
  </code></pre>
  
  <p>I have tested that, and styles are applying. </p>
  
  <p>Next I add the tilde prefixed import statement (repeated here for clarity).</p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/indigo-pink.css';
  </code></pre>
  
  <p>It errors out with:</p>
  
  <pre><code>http://localhost:58963/~@angular/material/prebuilt-themes/indigo-pink.css 404 (Not Found)
  </code></pre>
  
  <p>I also tried it by adding an alias into the webpack file:</p>
  
  <pre><code>resolve: {
              extensions: [".ts", ".js"],
              "alias": {
                  "~": path.resolve(__dirname, './node_modules')
              }
          },
  </code></pre>
  
  <p>How do I get this to work in that environment?</p>