Where do webpack assets go in an Angular 2 CLI project <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>