Configuring Angular SCSS for Different Environments

When building an Angular application, it’s often necessary to configure different styles for different environments. For example, you may want to use a different color scheme or typography in production than in development.

Angular Environment based SCSS file

To configure Angular SCSS based on environments, you can use the Angular CLI’s built-in support for environment files.

First, create a new environment file for each environment you want to configure. For example, you could create environment.prod.scss for your production environment and environment.dev.scss for your development environment.

Next, open your angular.json file and locate the styles property under your project configuration. Update the styles property to include the path to your environment-specific SCSS file(s). For example:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "src/environments/environment.dev.scss"
            ]
          }
        },
        "serve": {
          "options": {
            "styles": [
              "src/styles.scss",
              "src/environments/environment.dev.scss"
            ]
          }
        }
      }
    }
  }
}

In this example, we’ve added src/environments/environment.dev.scss to the styles array for both the build and serve targets.

Finally, update your environment files to define environment-specific SCSS variables, mixins, or other styles. For example, you could define a variable for your primary color:

// environment.dev.scss
$primary-color: #007bff;

Then, you can use this variable in your component SCSS files like so:

// my-component.component.scss
@import '../environments/environment';
button {
  background-color: $primary-color;
}

When you build or serve your app, the environment-specific SCSS file(s) will be included in the build and the appropriate styles will be applied based on the current environment.