Global styles are not being applied to Angular library by adding "assets" to ng-package.json with ng-packagr

user_13712594 0
Viewed 651

I am working on an angular library (version 9.1.11) with storybook, where I want to add styles globally. I know that for ng-packagr versions 9.x and above it is possible to copy assets into your library package as part of the build process to add styles globally.

"ng-packagr:" "~9.1.5" was already in devDependencies in my package.json, so I didn't reinstall it.

What I did is the following: I created the global.scss file in the root of my library. I added "assets" to my ng-package.json targeting my global.scss file. I added styles to my global.scss file. I ran an npm run build to copy the global.scss file into my dist folder.

After that the styles from my global.scss file are not being applied to my library.

What am I missing and why are the styles not being applied globally? And how can I add styles globally to my library correctly using ng-packagr?

This is what the files in my library look like:

enter image description here

Here's what my ng-package.json looks like:

    {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/angular-components",
  "assets": ["./global.scss"], <- ADDED HERE
  "lib": {
    "entryFile": "src/public_api.ts",
    "umdModuleIds": {
      "color": "color",
      "uuid": "uuid"
    }
  },
  "whitelistedNonPeerDependencies": [
    "color",
    "tslib",
    "uuid"
  ]
}
ng-packagr storybook angular-library angular
2 Answers

This problem will be solved in 6.4 by this PR

Currently there is a workaround.

Create an application to let storybook to load in angular.json

tsconfig.json need to point to the correct one.

"storybook": {
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "tsConfig": "tsconfig.json",
        "styles": [
            // Add your global stylesheets
        ],
        "scripts": []
      }
    }
  }
}

source

I used it with my NX project and it works perfectly.

user_6677670

try to add this in ng-package.json:

"lib": {
      "cssUrl": "inline"
    }

and include global.scss from your component style. However I suggest you to create a new library with your style and import this.

user_16500970
Related