Webpack 5 - Scss 相对 URL 不会加载图像

Question

我的 scss 和我的图片在同一级别的文件夹中。

文件结构

styles
  app.scss
images
  my-image.jpg

正在尝试像这样导入我的图片

app.scss

body {
  background: url(../images/my-image.jpg);
}

我有一个简单的 webpack 配置来加载 scss 和图像。

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./resources/index.js",
  resolve: {
    alias: {
      resource: path.resolve(__dirname, "resources/images"),
    },
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist",
    filename: "main.js",
    assetModuleFilename: "[name][ext][query]",
    clean: true,
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg)/,
        type: "asset",
      },
    ],
  },
};

后来我尝试在 css-loader 和 scss-loader 之间使用 resolve-url-loader，这看起来很有希望。但也无济于事。

构建没有抛出任何错误。但是页面打不开图片

感谢您对我的兄弟姐妹们的帮助。

Answer 1

最后，图像的问题只是在 web.config.js 文件的 publicPath 中。

将它从 dist/ 更改为 /dist 完成了工作。

const path = require("path");

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "dist/", //This is where the issue was
    filename: "main.js",
    assetModuleFilename: "[name][ext][query]",
    clean: true,
  },
  ...
};

给所有进入webpack的人一个警告。

Webpack 5 - Scss 相对 URL 不会加载图像

Webpack 5 - Scss relative urls won't load images

javascript

sass

webpack-5