MSBuild：如何使用预处理器指令有条件地包含特定的 CSS 片段？

Question

问题：

• 我有两个构建配置。每个都有自己的预处理器符号：DEV 和 PROD。
• 我希望每个版本都有自己的背景图像颜色。
• 对于 C# 文件，我知道我可以使用预处理器指令和构建符号来有条件地生成代码。

问题：如何使用 CSS 文件执行此操作（如下所示）？

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
#if PROD
    background-image: linear-gradient(180deg, #ff80ed 0%, gainsboro 90%);
#else
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
#endif
}

---

更新：

• 或者，如果可以解决问题，我也很乐意创建

  site.css.dev

  和

  site.css.prod

  。

Answer 1

受到这个答案的启发：

1. 从

   .sidebar

   中删除

   MainLayout.razor.css

   代码。
2. 在

   wwwroot\css

   目录下添加两个新文件：

   1. sidebar.Default.css

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

2. 侧边栏.Prod.css

.sidebar {
    background-image: linear-gradient(180deg, #ff80ed 0%, gainsboro 90%);
}

3. 修改

   _Layout.cshtml

   如下：

    <link href="css/site.css" rel="stylesheet" />
        @{
            var isProd = false;
            #if PROD
            isProd = true;
            #endif
        }
        @if (isProd)
        {
            <link href="css/sidebar.Prod.css" rel="stylesheet" />
        }
        else
        {
            <link href="css/sidebar.Default.css" rel="stylesheet" />
        }
        <link href="FooBar.styles.css" rel="stylesheet" />