title: Scss Structure for Angular applications and components
body: <p>I am getting errors when serving my app with ng serve. The scss file within footer, references the styles.css from assets. However, some of the scss files reference svgs from icons using relative path such as background(../icons/icon.svg) from assets/styles/styles.css. When this file is imported by footer.component.scss the pathing breaks. It is trying to reference src/app/layouts/icons/icon.svg which does not exist in that folder, but exists under src/assets/icons.</p>
  
  <pre><code>├── app
  |   ├── layouts
  |       |──footer
  |           ├── footer.component.ts
  |           ├── footer.component.scss
  |   
  ├── assets
  |    ├── icons
  |    ├── css
  |        |──pallette.scss
  |        |──_helpers.scss
  |        |──styles.scss
  </code></pre>
  
  <p>The goal I am trying to achieve is have a modular application with components that can be shared for other projects etc. There may be a totally different structure and approach to be doing this, and I am open to all suggestions.</p>