在 SCSS 图像路径前添加 CDN URL答案

【问题标题】：Prepend SCSS image paths with CDN URL在 SCSS 图像路径前添加 CDN URL
【发布时间】：2020-05-26 01:48:58
【问题描述】：

我对 Webpack 和 SCSS 非常陌生，所以我什至不知道如何很好地提出这个问题。本质上，我有一堆配置图像引用的 SCSS 文件。例如：

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

只要我引用在与 CSS 相同的服务器上提供的图像，它就可以正常工作。但是，我想从单独的 CDN 提供图像。我遇到的一个建议是使用 sass-loader 设置一个“cdnPath”变量并像这样调整引用：

/* 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 引用。有没有更好的方法我不知道？

【问题讨论】：

标签： webpack sass sass-loader

【解决方案1】：

一种方法是使用 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);
// }

【讨论】：