2

my angular app ends up being deployed to web server with different virtual paths such as:

http://website.com/app1/
http://website.com/app2/

To get them both work properly, at the build stage I change angular's <base href=> and webpack's publicUrl options to match specific virtual path app1 or app2.

The urls in my index.html are properly changed from <img src='hello.png'/> to <img src='app1/hello.png'/> but the urls inside the css and sass are not changed at all.

I use style-loader, css-loader and sass-loader plugins like that:

        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: [helpers.root('src', 'styles')],
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        }

And lets say my css is:

body {
  background-image: url(bg.png);
}

Can I force webpack to add publicUrl to bg.png and load it from url(app1/bg.png)?

UPD: There is no way to use Angular CLI

d.dizhevsky
  • 53
  • 6
  • Possible duplicate of [Can Angular CLI pass environment-specific settings to Sass variables?](https://stackoverflow.com/questions/42515893/can-angular-cli-pass-environment-specific-settings-to-sass-variables) – jcal Jan 14 '19 at 02:05
  • @jcal not really, I can't use angular CLI at all. I've updated the question – d.dizhevsky Jan 14 '19 at 02:10
  • take a look at [https://webpack.js.org/loaders/sass-loader/#environment-variables](https://webpack.js.org/loaders/sass-loader/#environment-variables) – jcal Jan 14 '19 at 02:17

1 Answers1

3

Something like this could work (not tested):

webpack.config.js

...

{
  loader: "sass-loader",
  options: {
    data: "$baseUrl: " + process.env.baseUrl + ";"
  }
}

...

scss:

body {
  background-image: url($baseUrl + 'bg.png');
}

this way you could also change process.env.baseUrl in the build stage

jcal
  • 871
  • 5
  • 14