Webpack 5中SCSS文件引用SVG/TTF资源时Loader失效问题

1. 先修正资源路径错误 #

这是引发Module not found的常见原因，先核对你的文件结构：
假设项目结构为：

repo/
├─ src/
│  ├─ scss/
│  │  └─ index.scss
│  ├─ assets/
│  │  └─ error-input.svg
│  └─ fonts/
│     └─ RobotoMono-Light.ttf

那么SCSS中的路径需要调整：

• TTF路径../fonts/RobotoMono-Light.ttf是正确的
• SVG路径应改为$_path: '../assets/';，而非../../assets/（从scss目录上一级就是src，src下直接包含assets文件夹）

2. 清理冲突的Loader规则 #

你的Webpack配置里存在重复的SVG处理规则，Webpack会优先匹配第一个符合的规则，导致后续资源Loader无法生效。

移除重复规则 #

删掉单独的SVG Loader配置：

// 移除这一行
{ test: /\.svg$/, use: ["svg-inline-loader", "svg-url-loader"] },

合并资源处理规则 #

推荐使用Webpack5内置的Asset Modules（无需额外安装url-loader/file-loader），配置如下：

{
  test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024 // 8kb以下资源转base64，可按需调整
    }
  }
}

如果坚持使用url-loader，确保已安装依赖npm install url-loader file-loader --save-dev，然后配置：

{
  test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
  loader: "url-loader",
  options: {
    limit: 8192,
    name: '[name].[hash:8].[ext]',
    outputPath: 'assets/' // 资源输出到dist/assets目录
  }
}

3. 确保css-loader正确解析url() #

显式配置css-loader的importLoaders参数，保证sass-loader处理后css-loader再解析资源路径：

{
  test: /\.s[ac]ss$/i,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        importLoaders: 1 // 让css-loader先等待sass-loader处理完成
      }
    },
    "sass-loader"
  ],
},

最终Webpack配置示例 #

const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  module: {
    rules: [
      { test: /\.jsx?$/, use: "babel-loader" },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "sass-loader"
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  plugins: [new HtmlWebpackPlugin({ template: "./public/index.html" })],
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx", "..."],
    preferRelative: true,
    modules: [".", "node_modules"],
  },
};

额外排查点 #

• 确认资源文件真实存在，文件名（含大小写）和SCSS引用完全一致（Linux/macOS区分大小写）
• 可通过添加resolve.alias简化路径，避免相对路径出错：

resolve: {
  alias: {
    '@assets': path.resolve(__dirname, 'src/assets'),
    '@fonts': path.resolve(__dirname, 'src/fonts')
  }
}

之后在SCSS中直接使用：

src: url('@fonts/RobotoMono-Light.ttf') format('truetype');
$_path: '@assets/';
content: url('#{$_path}error-input.svg');

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