Angular 2 Sass Architecture

architecture

your-project-folder/
|
├-- src/
|     ├── main.browser.ts                     * Entry file for our browser environment
|     |
|     ├── index.html                          * Index page
|     |
|     ├-- src/
|     |   ├── home/
|     |   |    ├── home.component.html        * Home component template
|     |   |    ├── about.component.scss       * Home component specific styles
|     |   |    └── about.component.ts         * Home component code
|     |   |
|     |   └── about/
|     |        ├── about.component.html       * About component template
|     |        ├── about.component.scss       * About component specific styles
|     |        └── about.component.ts         * About component code
|     |
|     └── assets/
|         ├── img/                            * Folder for storing images
|         |    └── ...
|         |     
|         ├── scss/
|         |    ├── abstracts/
|         |    |    ├── _mixins.scss          * Sass mixins
|         |    |    ├── _variables.scss       * Sass variables
|         |    |    ├── _functions.scss       * Sass functions
|         |    |    └── _placeholders.scss    * Sass placeholders
|         |    |    └── _main.scss            * Main Sass abstracts partials
|         |    |
|         |    └── base/
|         |         ├── _reset.scss           * Reset styles
|         |         ├── _form.scss            * Form styles
|         |         ├── _typography.scss      * Typography styles
|         |         └── main.scss             * Main Sass base file
|         |
|         ├── font/                           * Folder for storing fonts
|         |    └── ...
|         |    
|         └── icon/                           * Folder for storing fonts
|              └── ...
|
├── package.json                              * Identify npm package dependencies
├── tsconfig.json                             * Define how TypeScript compiler generates JS
└── webpack.config.js                         * Webpack configuration file