VS中.NET Core Angular模板搭配Bootstrap的样式统一问题咨询

你遇到的导入失败问题是Angular编译阶段的路径解析规则导致的：Angular默认只会扫描ClientApp/src目录下的资源，wwwroot是.NET项目的静态资源输出目录，编译阶段不在Angular的扫描路径内，直接写wwwroot/css/site.css当然找不到文件。

可用复用方案 #

两种落地方式都可以，根据你的开发习惯选就行：

• 方案1：统一存放公共样式+自动同步
  把原本放在wwwroot/css下的公共自定义样式挪到Angular的ClientApp/src/assets/css/目录下，命名为common-style.css
  1. Angular侧直接在styles.scss里用相对路径导入：@import './assets/css/common-style.css';，也可以加到angular.json的styles数组中，效果一致
  2. 在.NET项目的.csproj文件中加入构建自动同步任务，每次编译时自动把公共样式复制到wwwroot/css目录，不用手动维护两份文件，示例配置：

  <Target Name="CopyCommonCss" BeforeTargets="PreBuildEvent">
    <Copy 
      SourceFiles="$(ProjectDir)ClientApp\src\assets\css\common-style.css" 
      DestinationFolder="$(ProjectDir)wwwroot\css" 
      OverwriteReadOnlyFiles="true"
    />
  </Target>
  

• 方案2：直接跨目录导入现有样式
  不想挪现有文件的话，在styles.scss里写对相对路径即可，默认模板中Angular的styles.scss在ClientApp/src目录下，对应wwwroot的相对路径是往上跳两级，导入代码：

  @import '../../wwwroot/css/site.css';
  

  注意如果你的目录结构有调整，自己对应修改层级即可。

是否建议复用 #

完全建议这么做，尤其是你已经对齐了服务端Identity和NG Bootstrap的类名规则，复用样式可以避免重复编写、后续修改两端漏改的问题，维护成本低很多。
唯一需要注意的点：如果用SCSS变量，要么统一用纯CSS变量，要么给.NET侧加上SCSS编译能力（比如用WebOptimizer中间件），避免两边编译结果不一致。

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