如何使用预处理器指令在CSS中实现适配不同构建配置的条件编译？

方案1：使用CSS预处理器（推荐） #

原生CSS不支持条件编译，但Sass、Less这类预处理器可以实现类似C#预处理器的逻辑：

以Sass为例： #

1. 将原CSS文件改为.scss格式，调整代码如下：

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

main {
    flex: 1;
}

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

2. 构建时根据配置传递环境变量：
   • 编译PROD版本时，通过构建工具（如Webpack、Gulp或dotnet内置Sass编译工具）传入--env PROD参数
   • 编译DEV版本时传入--env DEV参数

以Less为例： #

利用Less的when条件判断实现：

@env: DEV; // 构建时替换该变量值

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

main {
    flex: 1;
}

.sidebar when (@env = PROD) {
    background-image: linear-gradient(180deg, #ff80ed 0%, gainsboro 90%);
}
.sidebar when (@env = DEV) {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

构建时通过工具动态替换@env的值即可。

方案2：分文件管理（符合你的补充需求） #

直接创建两个独立CSS文件，通过项目配置切换引用：

• site.css.dev（DEV环境样式）：

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

main {
    flex: 1;
}

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

• site.css.prod（PROD环境样式）：

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

main {
    flex: 1;
}

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

配置项目切换逻辑： #

1. 通过.csproj文件条件引用：
   在项目的.csproj中添加以下配置，根据构建配置自动复制对应文件：

<ItemGroup Condition="'$(Configuration)' == 'Debug'">
  <Content Include="site.css.dev" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>

<ItemGroup Condition="'$(Configuration)' == 'Release'">
  <Content Include="site.css.prod" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>

同时修改HTML中的CSS引用路径为对应文件名。

2. 通过构建事件覆盖文件：
   右键项目→属性→生成事件→预生成事件命令行，分别为Debug和Release配置添加命令：

• Debug（DEV）：copy "$(ProjectDir)site.css.dev" "$(ProjectDir)wwwroot/site.css" /Y
• Release（PROD）：copy "$(ProjectDir)site.css.prod" "$(ProjectDir)wwwroot/site.css" /Y
  这样HTML只需固定引用site.css即可。

方案3：用构建事件处理单模板文件 #

保留你写的带#if标记的模板文件（命名为site.css.template），通过PowerShell脚本在构建时清理代码：

.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
}

添加预生成事件： #

• 对于Release（PROD）配置：

powershell -Command "(Get-Content '$(ProjectDir)site.css.template') -replace '#if PROD','' -replace '#else.*?#endif','' | Set-Content '$(ProjectDir)wwwroot/site.css'"

• 对于Debug（DEV）配置：

powershell -Command "(Get-Content '$(ProjectDir)site.css.template') -replace '#if PROD.*?#else','' -replace '#endif','' | Set-Content '$(ProjectDir)wwwroot/site.css'"

脚本会自动删除不需要的代码块，生成最终可用的CSS文件。

内容的提问来源于stack exchange，提问作者Jim G.