2

We need to create a pure CSS library that can be used by our Angular, React, Vue and WC applications and libraries. Something that can be accessed in a way like @myorg/styles.

It seems related to this ticket #54 but it's already Closed with a promise that something will be done to address it.

However, I still can't see a proper way (via plugin?) to do this. I'm curious how others create a shareable (framework-agnostic) styles library.

raberana
  • 11,739
  • 18
  • 69
  • 95

2 Answers2

1

Simply generate a library via nx generate library and reference that library in your apps. docs

Generator will generate a complete library template (ts + css) but you can clean generated code with your needs.

Claudio
  • 3,060
  • 10
  • 17
  • Let's say I generate a shared-styles library that contains my shareable scss files. If I reference that in another library's scss file and do import "@myorg/shared-styles", isn't that referencing a ts file under shared-styles and not an scss file? I am not sure if you can point a path in your tsconfig.base.json to an scss file instead of ts – raberana Jan 11 '23 at 12:01
  • TLTR: Yes using `stylePreprocessorOptions.includePaths` in your bundler configuration. LONG ANSWER: From my understanding the real question is: "I want to do a SASS library, I would like to manage in a monorepo with nx". So the real point is not nx but sass compiler and file path. You can do in 2 way: use relative path (framework agnostic way), configure your bundler to bundle path (framework bundler dependant way) as described here https://github.com/nrwl/nx/issues/1542#issuecomment-508806609 – Claudio Jan 11 '23 at 15:00
  • So if your nx projects uses SASS compiler (I'm assuming this from your comment) you can simply: 1. Create a library as described in the answer 2. clean ts files 3. add to `project.json` of each target project in this json path `targets.build.options.styles`m add your lib SASS file as first element of the array. – Claudio Jan 11 '23 at 15:10
  • Thank you. I had a realization based from your answer. Sometimes we really need somebody who can point us the obvious XD – raberana Jan 11 '23 at 19:53
0

Your question is interesting. However, I think it may be impossible because we know that Angular (example) are javascript-base with layers to encapsulate:

App -> Modules -> Components -> TS + style + html

So it's hard to make the impact from a library directly to Component style.

A solution I can think of is instead of a library so we can create a folder called styles to store scss/sass files and import them separately to component files or angular.json. It's so basic and not cool, but it should work. Or if I were you, I would probably want to push these style files to a CDN storage (private/public) and add the <link rel="stylesheet" /> to index.html.

Hope this help particularly!

NickNgn
  • 122
  • 2
  • 8
  • I am not sure if I completely understand you but I know in a Lerna monorepo this is possible (we have this kind of setup before in Lerna but unfortunately I don't completely remember now how it was structured). Also, this is like a standard CSS framework like bootstrap that you can install in an Angular/React project. – raberana Jan 05 '23 at 10:46