Use dynamic path based on environment in Angular .scss file

Question

I have one angular component which is using some external styles sheet, along with component's own style sheet. I am importing external css file in component's .scss file at top like shown below (highlighted). This is working fine and css is getting applied to component's elements. However this style sheet is environment specific. For example:

In local it is http://localhost:8080/styles.css
On Dev it should be @import http://dev-server/styles.css
On Test environment it should be @import http://test-server/styles.css

I am not sure how can I pass this path dynamically based on environment. Please suggest.

user17740968 · Accepted Answer · 2022-04-27 12:51:47Z

1

You won't be able to use environment files (.ts) into style files (.scss).

However, what you can do is the same thing the environment is doing, to replace your files at build time.

First, create those files :

imports.local.scss
imports.dev.scss
imports.tests.scss

And fill them with the corresponding imports.

Then, in your angular.json, you can use those properties :

{
  ...,
  "projects": {
    "yourProject": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "yourEnvironmentNameLikeProductionOrTestOrDev": {
              ...
              "fileReplacements": [
                ...
                {
                  "replace": "src/styles/imports.local.scss",
                  "with": "src/styles/imports.[your environment name].scss"
                }
              ]
              ...
            },

answered Apr 27, 2022 at 12:51

user17740968

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

3 Comments

Gurmeet Over a year ago

This way I need to create 3 .scss files for that component and pick the right one based on environment during build.. right?.. that seems interesting

user17740968 Over a year ago

@Gurmeet that's it, it's exactly how the environment files work too. From what I see, this is the only solution available to you !

Gurmeet Over a year ago

Thanks for this.. it will sort out my problem I believe.

Collectives™ on Stack Overflow

Use dynamic path based on environment in Angular .scss file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related