How do you export a stylesheet and locally refer to the stylesheet from that local library? - NX Angular Monorepo with Library

Question

Before you get into the following, I am simply asking if it's possible to reference an scss stylesheet from a library project in your main project (monorepo).

In .ts files we would see import the libraries module through something like:

import { AppMainUiModule } from '@app-main-ui';

What I'm trying to do is something relative to this with the stylesheets so that I can import the stylesheets from the library into the stylesheets in the main project.

With that being said, I created a global stylesheet with some variables that I am using inside of my nx library and I would like to make this stylesheet available for the main projects scss files as well. How do I do this? Be mindful that this is a new build and monorepo, and does not actually have the package installed on it like you would have with a third party package.

I have attempted to add a custom path via my tsconfig using:

"paths": {
  ...
  "@app-main-ui/stylesheets": ["libs/app-main-ui/stylesheets/*"]
}

In the main app scss files I have attempted to import the stylesheet from the library using:

@import '@app-main-ui/stylesheets/global-variables';
@import '@app-main-ui/stylesheets/global-variables.scss';
@import '~@app-main-ui/stylesheets/global-variables';
@import '~@app-main-ui/stylesheets/global-variables.scss';
@import url('/stylesheets/global-variables'); // -- this said variable not found
@import url('/stylesheets/global-variables.scss'); // -- this said variable not found

I've also attempted to add the stylesheet to the main project's asset directory through the project.json file using:

"assets": [
    ...
    {
      "input": "libs/app-main-ui/styleheets",
      "glob": "**/*.scss",
      "output": "assets/styleheets"
    }
 ],
 "stylePreprocessorOptions": {
   "includePaths": ["libs/app-main-ui/styleheets"]
 },

The stylesheets are also being included in the libraries dist folder:

"assets": ["./stylesheets/*.scss"],

of which I can view the stylesheets under the actual generated dist folder when running the library by itself.

Another approach I was experimenting with is the exports of the package.json in the library:

  "exports": {
     ".": {
        "global-variables": "./src/lib/stylesheets/global-variables.scss"
     }
  },

And still, nothing. Is there something that I am missing here? I can use the file directory to access the files just fine, but when releasing to production I will not be able to reference the library from the file directory.

@import '../../../../../../../../libs/app-main-ui/stylesheets/global-variables.scss';

^^ this works....but can't use this in prod or any hosted environment for that matter since the library is an entirely separate project.

How do you export a stylesheet and locally refer to the stylesheet from that local library? - NX Angular Monorepo with Library

0 Answers0