如何在依赖的Blazor Server项目中访问Sass变量？

问题原因 #

你使用@use '_content/CompanyStyles/scss/colors';导入失败，是因为_content/...是Blazor运行时访问静态资源的路径，但dart-sass编译时是直接在本地文件系统中查找文件，这个路径在编译阶段并不存在，所以编译器找不到对应的样式表。

可行解决方案 #

方案一：调整RCL结构，使用项目相对路径导入 #

这是最适合.NET项目的轻量方案：

1. 调整RCL的Sass文件位置：把CompanyStyles/wwwroot/scss/_colors.scss移到项目根目录的Scss文件夹（比如CompanyStyles/Scss/_colors.scss），无需放在wwwroot（该目录用于存放编译后的静态资源，不是源码文件）。
2. 添加项目引用：在PayrollApp中添加对CompanyStyles的项目引用（右键PayrollApp → 添加 → 项目引用 → 勾选CompanyStyles）。
3. 修改导入路径：在PayrollApp的payrollList.scss中，根据项目的相对路径导入（假设两个项目在同一解决方案根目录下）：

@use '../CompanyStyles/Scss/colors';

h1.employee { color: colors.$primaryColor; }

4. 可选：配置编译加载路径：如果项目结构复杂，可在编译Sass时指定--load-path参数，比如用dart-sass命令：

dart-sass --load-path=../CompanyStyles/Scss wwwroot/scss/payrollList.scss wwwroot/css/payrollList.css

方案二：配置Sass编译加载路径（不移动文件） #

如果不想调整文件位置，可通过指定加载路径让编译器找到RCL中的Sass文件：

• 若使用Visual Studio的Web Compiler扩展，在compilerconfig.json中添加加载路径配置：

[
  {
    "outputFile": "wwwroot/css/payrollList.css",
    "inputFile": "wwwroot/scss/payrollList.scss",
    "options": {
      "loadPaths": ["../CompanyStyles/wwwroot/scss"]
    }
  }
]

• 若使用命令行编译，直接在dart-sass命令中加入--load-path参数：

dart-sass --load-path=../CompanyStyles/wwwroot/scss wwwroot/scss/payrollList.scss wwwroot/css/payrollList.css

此时payrollList.scss中的导入可简化为：

@use 'colors';

h1.employee { color: colors.$primaryColor; }

方案三：打包为本地npm包（适合大型团队） #

如果团队有前端包管理需求，可将通用Sass资源打包为npm包：

1. 在CompanyStyles项目中整理Sass文件，创建package.json，将其发布为本地npm包或私有仓库包。
2. 在PayrollApp和WarehouseApp中安装该包，然后通过模块路径导入：

@use 'company-styles/colors';

h1.employee { color: colors.$primaryColor; }

注意事项 #

• Sass的部分文件（仅用于导入、不单独编译的文件）需以下划线开头命名（如_colors.scss），导入时无需写下划线。
• 确保编译工具（如dart-sass、Web Compiler）有权限访问到CompanyStyles项目中的Sass文件路径。

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