title: Where do webpack assets go in an Angular 2 CLI project
body: <p>Where should I place general, cross-component <code>.css</code>, <code>.scss</code>, <code>.svg</code>, <code>.gif</code>, etc. assets (e.g., theme resources) in an Angular CLI (webpack) project so both the development and production versions of my application work correctly without changes?</p>
  
  <p>When I generate a new <code>foo</code> project with <a href="https://cli.angular.io" rel="nofollow">Angular CLI</a> (<code>angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64</code>) using <code>ng new foo --styles=scss</code>, the following structure is created (with <code>node_modules</code> trimmed):</p>
  
  <pre><code>foo
  ├── angular-cli.json
  ├── config
  │   ├── karma.conf.js
  │   └── protractor.conf.js
  ├── e2e
  │   ├── app.e2e-spec.ts
  │   ├── app.po.ts
  │   └── tsconfig.json
  ├── node_modules
  ├── package.json
  ├── public
  ├── README.md
  ├── src
  │   ├── app
  │   │   ├── app.component.css
  │   │   ├── app.component.html
  │   │   ├── app.component.spec.ts
  │   │   ├── app.component.ts
  │   │   ├── app.module.ts
  │   │   ├── environments
  │   │   │   ├── environment.dev.ts
  │   │   │   ├── environment.prod.ts
  │   │   │   └── environment.ts
  │   │   ├── index.ts
  │   │   └── shared
  │   │       └── index.ts
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── main.ts
  │   ├── polyfills.ts
  │   ├── test.ts
  │   ├── tsconfig.json
  │   └── typings.d.ts
  └── tslint.json
  </code></pre>
  
  <p>The <code>public</code> area seems reasonable but what about <code>.scss</code> files? The <code>src/app/public</code> seems reasonable as well, but what the right directory to allow the development and production versions to work correctly? </p>
  
  <p>What should file references look like in HTML and SCSS files? Are they all relative paths based on source layout in SCSS files (e.g.<code>@import '../scss/layout';</code>) and absolute paths in HTML files (e.g., <code>&lt;link href="/assets/css/main.css" rel="stylesheet"&gt;</code>)?</p>