Как заставить CSS-адреса соблюдать настройку publicPath в веб-пакете? - PullRequest
Новая
       8

Как заставить CSS-адреса соблюдать настройку publicPath в веб-пакете?

0 голосов
/ 14 января 2019

мое угловое приложение заканчивается развертыванием на веб-сервере с различными виртуальными путями, такими как: 

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

Чтобы они оба работали правильно, на этапе сборки я изменяю опции angular <base href=> и publicUrl webpack для соответствия конкретному виртуальному пути app1 или app2.

URL в моем index.html правильно изменены с <img src='hello.png'/> до <img src='app1/hello.png'/> но URL внутри css и sass не меняются вообще.

Я использую плагины style-loader, css-loader и sass-loader, например: 

        {
          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')]
        }

И скажем, мой css: 

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

Могу ли я заставить веб-пакет добавить publicUrl к bg.png и загрузить его из url(app1/bg.png)?

UPD: Нет возможности использовать Angular CLI

1 Ответ

0 голосов
/ 14 января 2019

Примерно так может работать (не проверено):

webpack.config.js 

...

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

...

СКС: 

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

таким образом, вы также можете изменить process.env.baseUrl на этапе сборки

...