将 SASS 转换到 Azure WebApps 上的不同生产环境

Question

我有一个场景，其中有单个开发实例、单个临时实例和多个生产环境，每个环境都运行自己的Azure WebApp和数据库。 每个“租户”都有不同的品牌，因此颜色模式存储在数据库中。

应用程序在 .NET 8 上运行，前端是 bootstrap 5

我无法在编译时使用转译，因为只有一个构建过程，然后将其部署到多个实例（通过 azure dev ops）。

想法1： 我的旧方法是在应用程序启动时启动 powershell 进程并安装 node-sass + 通过 powershell 手动执行 node-sass 操作：

ProcessStartInfo installInfo = new ProcessStartInfo();
installInfo.FileName = "powershell.exe";
installInfo.Arguments = "cd " + Directory.GetCurrentDirectory().Replace(" ", "` ") + ";npm install -g node-sass";
...

startInfo2.FileName = "powershell.exe";
startInfo2.Arguments = "cd " + Directory.GetCurrentDirectory().Replace(" ", "` ") + ";node-sass ABC.scss ABC.css --style compressed";

这似乎在一段时间内工作正常，但几个月来我没有得到任何结果。在 Azure WebApp 上安装 node-sass 不起作用（每次），因为 npm 版本不是最新的。

npm notice New major version of npm available! 9.7.2 -> 10.2.5

我无法完全重现这一点，因为在某些情况下它工作正常。在配置中没有差异，所以我不明白为什么它的行为不相等。

我使用最高可用的

WEBSITE_NODE_DEFAULT_VERSION

（20.4.0），但Azure似乎还不允许更新的节点版本。 因此，在大多数机器上，转译不起作用，因为 node-sass 没有安装，也不能安装。

想法2： 我的 CI/CD 管道正在 Azure DevOps 上运行，也许我可以在发布时执行 sass 转换？ 我尝试实现 Colepile Sass Addin，但无法使其工作。:

Answer 1

方法1：-

无需在 powershell 脚本中添加 sass 命令，而是直接使用 Sass 构建您的 Web 应用程序，然后在 Web 应用程序中发布构建的工件。

我的 Azure DevOps yaml 代码：-

trigger:
  branches:
    include:
      - main
      - development

pool:
  vmImage: 'windows-latest'

steps:
- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'

- script: |
    npm install -g npm@latest
    npm install node-sass # Install node-sass locally
    cd $(System.DefaultWorkingDirectory)/wwwroot/css/Sass
    node-sass style.scss ../style.css --output-style compressed
  displayName: 'Install Node.js dependencies'

- task: DotNetCoreCLI@2
  displayName: 'Build .NET Solution'
  inputs:
    command: 'build'
    projects: '**/*.csproj'
    arguments: '--configuration Release'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'
    ArtifactName: 'drop'

输出：-

然后参考我的SO答案将Web应用程序部署到Azure中

方法2：-

直接在本地使用 Web 应用程序构建 Sass 文件，并直接将构建文件夹推送到 Azure Repos 中，然后使用发布管道和构建工件来部署到 Web 应用程序。