NX 13.10 Angular单体仓库中共享单个styles.css文件及自定义构建样式输出路径的实现方案

我来帮你搞定这两个NX 13.10升级时遇到的样式配置问题，结合你的仓库场景给你具体可行的方案：

一、共享单个styles.css文件 #

在NX单体仓库里，共享公共样式的最佳实践就是把样式文件放在libs目录下（就像你现在的libs/assets/css/styles.scss），让所有应用统一引用它，避免重复打包：

1. 在每个应用的project.json中配置样式引用
   打开对应应用的project.json，找到build.options.styles数组，添加对公共样式的引用：

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

   这样所有应用都会共用这一份样式文件，确保样式一致性。

2. 优化SCSS变量/混合宏的全局导入
   如果你的公共样式里包含SCSS变量、混合宏这类需要全局使用的内容，可以添加stylePreprocessorOptions配置，这样在组件样式里不用写全路径就能导入：

   "build": {
     "options": {
       // ...其他构建配置
       "stylePreprocessorOptions": {
         "includePaths": ["./libs/assets/css"]
       }
     }
   }
   

   之后在组件的.scss文件里直接写@import "variables";就可以了。

二、将样式文件输出到dist/styles目录 #

你提到的旧版本bundleName带路径的方式在Angular 13+（NX 13.10基于此版本）里被限制了，因为CLI不允许输出到应用的outputPath之外。这里有两种简便的解决方案：

方案1：使用NX构建后脚本（推荐，稳定可靠） #

通过NX的run-commands执行器，在构建完成后自动把样式文件移动到dist/styles目录：

1. 在应用的project.json中添加post-build目标
   找到targets节点，新增如下配置：

   "targets": {
     "build": { /* ...你现有的构建配置... */ },
     "post-build": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
           "mkdir -p dist/styles", // 确保目标目录存在，避免报错
           "mv dist/apps/qqq/styles.*.css dist/styles/" // 移动带哈希的样式文件
         ]
       },
       "dependsOn": ["build"] // 确保先完成构建再执行移动操作
     }
   }
   

2. 关联构建与后处理脚本
   如果你想运行nx build qqq时自动触发移动操作，可以给build目标添加postTargets配置：

   "build": {
     // ...现有配置
     "postTargets": ["post-build"]
   }
   

   这样每次构建完成后，样式文件都会自动出现在dist/styles目录下。

方案2：自定义Webpack配置（直接修改输出路径） #

如果你不想用构建后脚本，可以通过自定义Webpack配置直接调整样式文件的输出路径：

1. 在应用目录下创建webpack.config.js
   比如在apps/qqq/下新建文件，内容如下：

   module.exports = (config, context) => {
     // 修改styles chunk的输出路径
     config.output.filename = (pathData) => {
       if (pathData.chunk.name === 'styles') {
         // 相对于应用的outputPath（dist/apps/qqq），输出到上层的styles目录
         return '../styles/[name].[contenthash].css';
       }
       // 其他文件保持原输出路径
       return config.output.filename;
     };
     return config;
   };
   

2. 在project.json中指定自定义Webpack配置
   找到build目标的options，添加customWebpackConfig：

   "build": {
     "executor": "@nrwl/angular:webpack-browser",
     "options": {
       // ...其他配置
       "customWebpackConfig": {
         "path": "./apps/qqq/webpack.config.js"
       }
     }
   }
   

   这种方式会让Webpack直接把样式文件输出到dist/styles目录，但需要注意NX版本的兼容性，后续升级时可能需要微调配置。

内容的提问来源于stack exchange，提问作者sboggs11