8

I'd like to use the Pure.css module in an Angular library created with the CLI generate library command.

I have a workspace app in which I have ran the generate library command to create the library. The library was successfully created and I was able to link it and install it in a different project. However I would like to use the grid system from the Pure.css library, in the angular.json file of the workspace app (the one containing the library), I have the styles entry in the build configuration of the library project like.

"styles": [
   "node_modules/purecss/build/pure-min.css",
   "node_modules/purecss/build/grids-responsive-min.css"
]

and in one the library's components I have a markup that uses the Pure.css rules like 

<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

But when I use the component in the external project it is clear that the styles are not being applied.

So I have imported the Pure.css styles files in the .css file of the respective component, like

@import url("node_modules/purecss/build/pure-min.css");
@import url("node_modules/purecss/build/grids-responsive-min.css");

this works, but I would like the styles from the Pure.css library to be included in the whole library instead with one component.

Is there a way to achieve this, I have done some search but could not find any resources, is it possible to maybe configure the ng-packagr to include the styles in the build of the library?

I am building the library from the containing workspace project using a script defined in the package.json file like 

"build:lib": "ng-packagr -p projects/my-library-project/package.json"

And how would I install third party modules to the library project in general, do I install them via the workspace project?

Any assistance is appreciated, thanks.

Thabo
  • 1,303
  • 2
  • 19
  • 40
  • 3
    It’s a bad idea to expose third party library in your library. Just add this library at the project that consumes your library and mention the dependency in library’s peerDependencies – smnbbrv Sep 08 '18 at 15:24
  • OK thanks I think I am getting what you mean. – Thabo Sep 08 '18 at 17:21
  • @smnbbrv ..yes, but then "external" libraries would be responsible for importing styles from `peerDependecy`? – PeS Sep 10 '18 at 02:26
  • @PeS yes, that’s what peer dependencies are made for – smnbbrv Sep 10 '18 at 05:56
  • 1
    That's what I was afraid of. You cannot deliver library that is encapsulated and working just by importing, you must let some further config on the developer who uses the library :( – PeS Sep 10 '18 at 09:51
  • 1
    @smnbbrv now I fully understand why you said it was a bad idea to expose third party libraries in my library, but I should instead use the peerDependencies, then NPM will use the library's package.json(peerDependency) to resolve the 3rd party package in the consuming project if the consuming project or another third party package uses a different version of the package than the one required by my library(NPM will give a warning if there are these conflicts or it will install the version of the third party package defined in my library's peerDependencies). Thanks again. – Thabo Jun 24 '19 at 11:35
  • 1
    you are welcome :) That's good it helped. I had really same problem some years ago and still pay for that. Life sucks :D – smnbbrv Jun 25 '19 at 06:49

1 Answers1

0

You can import third party library inside tsconfig.json

"paths": {
  "example-ng6-lib": [
    "dist/example-ng6-lib"
  ]
}
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27