如何使用预处理器指令有条件地包含特定的 CSS 代码段？-解网

问：

问题：

我有两个构建配置。每个都有自己的预处理器符号：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.devsite.css.prod

CSS MSBuild Blazor Visual-Studio-2022 预处理器指令

三种方法： 1.）选择一个 CSS 预处理器并将其添加到您的构建步骤中。了解可用工具的起点可能是“流行的 CSS 预处理器......”。您需要一个支持条件逻辑并支持传递 DEV|PROD 标志。2.）维护单独的 dev 和 prod 文件，并让 MSBuild 复制适当的文件，例如，当配置为 DEV 时，复制到 .生成和/或打包步骤应使用 .site.css.devsite.csssite.css

1赞 Jonathan Dodds 9/23/2023

3.）如果只是背景颜色在配置之间不同，请维护一个包含 PROD 信息的文件。在 DEV 版本上，在打包文件之前修改文件。site.css

答：

0赞 Jim G. 9/25/2023 #1

受此答案的启发：

从中删除代码。.sidebarMainLayout.razor.css
在目录中添加两个新文件：wwwroot\css
1. sidebar.Default.css

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

sidebar.Prod.css

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

修改如下：_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" />

上一个：使用正确的 #define 预处理器指令语法替换/重命名文本/函数名称

下一个：预处理器指令，用于检测使用“专为 iPad 设计”目标在 macOS 上运行

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

How can I use Preprocessor Directives to Conditionally Include Specific CSS Snippets?

评论