CODEWITHSUNDEEP
angularassetsangular-cli
Jan Nielsen
Jan Nielsen

Reputation: 11799

Where do webpack assets go in an Angular 2 CLI project

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">)?

Upvotes: 1

Views: 1870

Answers (2)

Robert Baker
Robert Baker

Reputation: 25963

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

Upvotes: 1

Abu Barrett
Abu Barrett

Reputation: 149

Not sure if this is what you're looking for, but instead of making one huge .scss file, compiling it and linking it to index.html, I would recommend using the angular cli scss support.

First you need to install node-sass by doing npm install node-sass --save-dev

Then your component should look like this

@Component({
templateUrl: 'file.html',
directives: [your-directives],
styleUrls: ['path/to/file.scss'] // (or just ['file.scss'] in the same directory

when you ng serve or ng build or whatever it just automatically compiles the scss files.

Of course change your app.component.css to app.component.scss. No need to use compass or any other scss compiler. Good luck!

Upvotes: 1

Related Questions