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

Question

Problem:

I have two build configurations. Each has its own preprocessor symbol: DEV and PROD.
I would like each build to have its own background-image color.
For C# files, I know that I can use preprocessor directives with the build symbols to conditionally generate code.

Question: How can I do this with a CSS file (like below)?

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

UPDATE:

Alternatively, I'd be just as happy creating a site.css.dev and site.css.prod if that would solve the problem.

Three approaches: 1.) Choose a CSS Preprocessor and add it to your build steps. A starting point for learning about available tools may be "Popular CSS preprocessors ...". You need a preprocessor that supports conditional logic and that supports passing your DEV|PROD flag. 2.) Maintain separate dev and prod files and have MSBuild copy the appropriate file, e.g. when the configuration is DEV, copy site.css.dev to site.css. The build and/or packaging steps should use site.css. — Jonathan Dodds
– Jonathan Dodds, Commented Sep 23, 2023 at 14:40
3.) If it is only the background color that is different between configurations, maintain a site.css file with say the PROD info. On a DEV build, modify the file before it is packaged. — Jonathan Dodds
– Jonathan Dodds, Commented Sep 23, 2023 at 14:45

Jim G. · Accepted Answer · 2023-09-24 21:46:18Z

0

Inspired by this answer:

Remove the .sidebar code from MainLayout.razor.css.
Add two new files in the wwwroot\css directory:
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%);
}

Modify _Layout.cshtml as follows:

    <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" />

answered Sep 24, 2023 at 21:46

Jim G.

15.4k23 gold badges109 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related