Webpack 5 如何保留CSS中@import引入的外部字体URL不被处理

问题原因 #

默认情况下css-loader会解析CSS文件内所有的@import和url()引用，尝试将其作为本地项目资源打包处理，因此你写的远程字体CSS引入会被css-loader捕获，无法原样保留。

解决方案 #

修改webpack配置中css-loader的参数，添加过滤规则跳过对远程http/https开头资源的解析即可，修改后的配置如下：

{
  test: /\.(css|scss)$/,
  use: [
    "style-loader",
    // 将原来的css-loader字符串写法替换为带参数的对象配置
    {
      loader: "css-loader",
      options: {
        // 仅处理相对路径的@import，跳过远程http/https开头的引入
        import: (importPath) => !importPath.startsWith('http'),
        // 若需要保留CSS中其他远程url()资源引用（比如背景图、字体直连等）可添加此行，不需要可删除
        url: (urlPath) => !urlPath.startsWith('http')
      }
    },
    "sass-loader"
  ],
},
// 原有字体资源处理规则保持不变即可
{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  exclude: [/images/],
  type: "asset/resource",
  generator: {
    filename: "fonts/[name][ext]",
  },
},

配置修改后重新启动webpack服务或重新打包，CSS中的远程@import就会原样保留，由浏览器直接加载对应的远程资源。

内容的提问来源于stack exchange，提问作者Mr.