Angular 2 style file organization strategy

Asked Feb 05 '17 at 06:29

Active Feb 05 '17 at 06:35

Viewed 69 times

I am new to angular 2 and i'm planning to start a new project using this.At initial state i need to plan the structure of the files and was planning to keep each components html,js and sass files in separate folders.I will be using webpack. When building my plan is to copy the transpiled/compiled js ,css to a dist folder with the same structure as below.My problem is if at some point i want to bundle and minify the css files, the css files referred by each component is a separate file.So should i not be using separate style file for each component and use one central file.What is the approach.Is there a way for webpack to bundle and minify all the css files but still be able to map out styles as if they were separate file refered to by each component.

/src
  /inputComponent
     inputComponent.ts
     inputComponent.html
     inputComponent.scss
  /textComponent
     textComponent.ts
     textComponent.html
     textComponent.scss

edited Feb 05 '17 at 06:35

asked Feb 05 '17 at 06:29

Shalitha Vikum

http://stackoverflow.com/questions/41868474/angular2-project-structure/41868945#41868945 – Habeeb Feb 05 '17 at 07:28
https://angular.io/styleguide#!#app-structure-and-angular-modules – Habeeb Feb 05 '17 at 07:29
1

Take a look at angular-cli. It does for you everything you are looking for – Picci Feb 05 '17 at 07:49

Angular 2 style file organization strategy

0 Answers0