如何在v13 nx和Angular Monorepo中共享单个样式。CSS文件

发布于 2025-01-22 13:38:07 字数 1877 浏览 1 评论 0原文

我正在将NX / Angular Monorepo升级到NX 13.10。我想知道是否可以将构建的样式重新安置。1234Etc.css文件文件 dist/styles,这是我们在较旧版本中所做的。

我们曾经在angular.json build.options.options中进行此操作:

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

... ,而不是dist/[appName]/styles.1234etc.css。上面显示的样式对象的位置已移至[appName]/project.json。但是,在Angular的较新版本中,该示例中的Bundlename路径不再是Bundlename的有效值。它生成此错误: 不能将资产写入输出路径以外的位置。 因此,我们必须这样做:

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

重述,我们现在正在获取此构建输出(dist/中的样式位置):

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

...我更喜欢:

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

这不是至关重要的 - 不要打破 - 我可以忍受它,并且我可以在构建后使用脚本来解决此问题(不过可能只接受新方法),但是我只是想知道是否有一种简单的方法可以拥有dist/ dist/ styles/style.1234etc.css,我刚刚被忽略了吗?

示例代码,我有一个最小的monorepo,at https://githblitz.com/srbstackblitz/nxng-nxng-example-nxng-example 。谢谢。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文