0

I have this scss file

 &__passo2 {
        width: 100%;
        height: auto;
        margin-bottom: 56px;
        margin-top: 14px;

        figure {
            height: 44vw;
            width: 70vw;;
            margin: 0 auto;
            background-image: url('../../../../assets/img/01.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border: none;
        }
    }

I want to replace url inside background-image something like this

background-image: url(`${environment.baseUrl}/img/01.png`);

My environment file

export const environment = {
    production: false,
    verbose: true,
    baseUrl: 'http://localhost:9081/assets'
};

I use angular 7 in my project, i saw some solutions for customizing environment variables in the webpack config, but my project doesn't have this file and I didn't really understand what it is for and how to configure

chewie
  • 333
  • 2
  • 3
  • 19
  • environment files are needed for configuring the URLs such as your case or to pass some environment specific configs. You can create multiple environments files as per your need, one for SIT one for UAT one for Prod etc. When you build your project for any environment this file with a specific config such as ```environment.prod.ts``` will be picked when you build the app for ```prod``` – Deepak Jha Dec 17 '21 at 15:40
  • You can't use an env variables like that in a style file. But you can set via javascript a root variable with the baseUrl and use it in the SCSS as a variable. – Jacopo Sciampi Dec 17 '21 at 16:34
  • Is the background image in the same project? If yes just use a relative path like "assets/...". (assets hook to your angular assets folder by default) – Deitsch Dec 17 '21 at 17:51

0 Answers0