Предварительно S CSS пути к изображениям с CDN URL - PullRequest
Новая
       30

Предварительно S CSS пути к изображениям с CDN URL

0 голосов
/ 10 февраля 2020

Я очень новичок в Webpack и S CSS, поэтому я даже не знаю, как правильно задать этот вопрос. По сути, у меня есть куча файлов S CSS, которые настраивают ссылки на изображения. Например: 

.someClass {
  background-image: url(img/some-image.png);
}

, который работает нормально, если я ссылаюсь на изображения, поданные на тот же сервер, что и CSS. Тем не менее, я хотел бы обслуживать изображения из отдельного CDN. Одно из советов, с которыми я столкнулся, - это установить переменную "cdnPath" с помощью sass-loader и настроить ссылки следующим образом: 

/* webpack.config.js /*
{
  loader: "sass-loader",
  options: {
    data: "$cdnPath: https://cdn-path.com;"
  }
}

/* some.scss */
.someClass {
  background-image: url($cdnPath + "img/some-image.png");
}

Однако, на мой взгляд, это похоже на подверженное ошибкам решение. Мне интересно, есть ли способ автоматически добавлять путь CDN к этим ссылкам URL. Есть ли лучший способ, о котором я не знаю?

1 Ответ

0 голосов
/ 10 февраля 2020

Один способ с функцией SASS: 

$cdn-url: "https://cdn-path.com";

@function get-asset($local-path) {
  @return url($cdn-url + $local-path);
}

.some-class {
  background-image: get-asset("/static/images/image.png");
}

// Output:
//
// .some-class {
//   background-image: url(https://cdn-path.com/static/images/image.png);
// }
...