在 webpack 中重写 CSS/SASS/SCSS 中的资产路径答案

【问题标题】：Rewrite assets paths in CSS/SASS/SCSS in webpack在 webpack 中重写 CSS/SASS/SCSS 中的资产路径
【发布时间】：2021-09-20 04:58:51
【问题描述】：

我正在从 Webpack 4 升级到 Webpack 5，这是我的配置文件差异： https://diffy.org/diff/5599db6178258

我有一个 CSS 文件 assets/fonts/inter.css，其中包含以下字体定义：

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("Inter-Thin.woff2?v=3.15") format("woff2"),
       url("Inter-Thin.woff?v=3.15") format("woff");
}

当此文件包含在 SCSS 或 JS 文件中时，那些 urls 过去会被重写为 assets/fonts/Inter-Thin.woff2?v=3.15，但现在保持不变。

我尝试使用resolve-url-loader，但它什么也没做。如何将 url 重写到正确的路径？

【问题讨论】：

标签： css webpack sass

【解决方案1】：

因为您要升级到 webpack 5。

url-loader 或 file-loader 对于 webpack 5 已弃用，因此更喜欢使用内置的 Asset Modules 替换它们，因为它们可能与最新的 webpack 5 不兼容
您可以使用output.assetModuleFilename 自定义目标资产的输出路径和文件名

【讨论】：