I'm using lerna to create a monorepo of stenciljs components. My components are in their own folders under my-repo/packages/compOne, my-repo/packages/compTwo, etc. I have shared stylesheets in my-repo/shared/assets/styles/colors.css and my-repo/shared/assets/styles/fonts.css. In the tsx files for my components I reference the shared css files using styleUrls: ['./compOne.css', '../../../../../shared/assets/styles/colors.css', '../../../../../shared/assets/styles/fonts.css', ] in the component decorator.
That seems to work fine if I cd into my-repo/packages/compOne and npm run build:prod.
However, now I want to make a new repo with some of my components in it(long story) so I create my-repo/packages/combined and copy the appropriate component tsx and css files into the right spot. Since the paths are at the same depth, the relative paths to the shared css works. But when I'm in my-repo/packages/combined and run npm run build:prod I can an error because the build process is trying to copy ./my-repo/shared/assets/styles/colors.css to ./shared/assets/styles/colors.css. Naturally ./shared doesn't exist, so that explains why the copy failed.
The odd thing is that in my stencil.config.ts file I added globalStyle: '../../shared/assets/styles/colors.css' and it does not throw an error trying to copy the fonts.css file even thoguh they are both referenced in the tsx. I assumed that since the tsx styleUrls listed both, the build would try to copy both. But apparently not? Also I don't see colors.css or combined.css (from the namespace setting) in my dist folder, which I thought should happen.
My question, and I do have one, is what is the best way to handle sharing multiple css files amonth multiple packages in a monorepo? And if I need to reference css files that live outside of the my-repo/packages folder is it better to do it in the styleUrls array in the component decorator or add @import lines in compOne.css?
thanks!