0

I am in a situation where I got an angular project. Lets call it project A. Project A is finished and it has a lot of useful components like own material components (Own select, own checkbox... etc...). I need to create project B this time but in the future perhaps project C, D, E .. is coming. I want to share the materials with them without publication. So I created materials module in project A. This module declares and exports the material components. In the (new) project B I import materials module relatively. Obviously because I want to use his components. Unfortunately style of material components is written in scss.

I use variables in the project as well. Why not? when this is one of the strongest feature of scss. So I created a global file that includes scss variables functions mixins and more. I import it like this:

@import "~scss/_global.scss";

.material-componenet{
 color: $variableFromGlobal;
}

project A is still working fine. On the other hand when I build project B it does not find "~scss/_global.scss" file because it is looking for it in project B. I want to avoid code duplication. (A B C D E .. can be far from each other in tree structure)

I know it is a special problem but any idea would be helpful.

Thanks your time and answers!

Bálint Réthy
  • 411
  • 1
  • 6
  • 25
  • Check [this](https://stackoverflow.com/questions/23899962/share-scss-variables-across-different-projects-sites) answer, maybe it will help you – hepifish Mar 08 '18 at 12:52
  • Maybe you should put your components in a extra module and publish them as npm packages to your own host. This way you can reuse them in every project you want to – ochs.tobi Mar 08 '18 at 12:58
  • try add relative path: @import '../node_modules/porjectA/furtherpath' – tano Mar 08 '18 at 13:07

1 Answers1

0

Interesting question, I assume you use either use node_modules or src folder for all your projects.

  1. If the project A is a module which is already published via npm, then you can just do what you did

    @import "~project1/scss/_global.scss"

~ symbol will look into the node_modules.

  1. If the project A is a folder along src or outside of src, you can do

    @import "../lib/project1/scss/_global.scss"

import understands the relative link.

windmaomao
  • 7,120
  • 2
  • 32
  • 36
  • So if you collaborate with others you assume their local environment looks the same as yours? – ochs.tobi Mar 08 '18 at 13:05
  • It depends Tobi. Sometimes people just do quick job, or just test some ideas, so they can have projects anywhere inside that repo. In real world, collaboration can be in any form. – windmaomao Mar 08 '18 at 13:39