'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 |
|---|
