'How to share a single styles.css file in a v13 nx and angular monorepo

I am upgrading an nx / angular monorepo to nx 13.10. I am wondering if it is possible to relocate the built styles.1234etc.css file to a directory dist/styles, which is what we had been doing in older versions.

We used to do this in angular.json build.options for each app:

            "styles": [
              {
                "input": "./libs/assets/css/styles.scss",
                "bundleName": "../../styles/styles"
              }
            ]

... and this would result in dist/styles/styles.1234etc.css, instead of dist/[appName]/styles.1234etc.css. The location of styles object shown above is has now moved to [appName]/project.json. However, in newer versions of Angular, the bundleName path in that example is no longer a valid value for bundlename. It generates this error: An asset cannot be written to a location outside of the output path. So we have to do this instead:

            "styles": [
              {
                "input": "./libs/assets/css/styles.scss",
                "bundleName": "styles"  <--filename, path no longer allowed
              }
            ]

Restated, we are now getting this build output (note location of styles in dist/):

nxng-example/
├── apps/
│   ├── qqq/
│   
├── libs/
│   ├── assets/
│       ├── styles/styles.css
│  
├── dist/
    ├── apps
        ├── qqq/
            ├── styles.12345etc.css  <-- move this...
            ├── index.html, and .js files

... and what I would prefer:

nxng-example/
├── apps/
│   ├── qqq/
│   
├── libs/
│   ├── assets/
│       ├── styles/styles.css
│  
├── dist/
    ├── apps
    │   ├── qqq/
    │       ├── index.html, and .js files
    │ 
    ├── styles.12345etc.css   <-- ...to here 

This is not critical - not breaking - and I can live with it, and I could use a script to fix this after the build (probably will just accept the new way, though), but I am just wondering if there is an easy way to have dist/styles/styles.1234etc.css, that I have just overlooked?

I have a minimal monorepo for example code at https://github.com/srbStackblitz/nxng-example. Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source