Where should I place general, cross-component .css, .scss, .svg, .gif, 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?
When I generate a new foo project with Angular CLI (angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64) using ng new foo --styles=scss, the following structure is created (with node_modules trimmed):
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
The public area seems reasonable but what about .scss files? The src/app/public seems reasonable as well, but what the right directory to allow the development and production versions to work correctly?
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.@import '../scss/layout';) and absolute paths in HTML files (e.g., <link href="/assets/css/main.css" rel="stylesheet">)?
If you migrated an existing project, make a styles.scss under src/, that file is meant for global styles. You can also put them under app.component.scss