8

I am working with Angular 12. I created one library and one project. In my library I have style (dark-theme.scss) file which I want to provide to the app.

I know from documentation that I need to set assets to ng-packagr. In nx workspace that is ng-package.json file in library root folder.

My ng-package.json look like:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/my-lib",
  "assets": ["**/dark-theme.scss"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}

After library built I checked and my scss file is really on the path:

dist\libs\my-lib\dark-theme.scss

In my app I want to import that style into general app style (styles.scss):

@import "@my-lib/dark-theme.scss";

also tried:

@import "~@my-lib/dark-theme.scss";

When I tried to start app in Nx workspace I get error:

./apps/app-demo/src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "@my-lib/dark-theme.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

All other files form the same library is successfully imported and works (modules, components, pipes...). I have only problem with this style/assets.

What is the proper way to do that ?

Milos
  • 1,678
  • 4
  • 23
  • 49
  • I also have this issue,I can import fonts but I can't import another CSS from inside a CSS file.Btw in your example you should update your project.json to the following syntax for assets ` "assets": [ { "glob": "**/*", "input": "libs/assets/src/lib/themes", "output": "assets/themes" } ]` Then your import in your CSS file should point to the public folder rather than the library. Something like `@import "../public/assets/themes/dark-theme.scss"; ` – Ray Aug 10 '22 at 18:52

0 Answers0