WebPack：背景图片未加载

Question

正在尝试加载 SCSS 中定义的 CSS 背景图像，并通过 WebPack devServer 提供服务。

SCSS中定义的背景图片被WebPack获取，但页面上没有显示。

我已经尝试在 MiniCssExtractPlugin.loader 中设置 publicPath 选项，并查看了我能找到的与此问题相关的所有答案，但未能使它起作用。

更新：还尝试在 file-loader 中设置 publicPath 选项。根据文档，这默认为输出 publicPath，与我的情况相同。

Update：在 SCSS 中使用绝对路径时，它会编译为 CSS 作为确切路径，但这不会起作用因为本地开发和暂存和生产都有不同的路径。

当运行 webpack-dev-server时输出的相关部分：

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/dist/cjs.js??ref--5-2!index.scss:
                     Asset      Size  Chunks             Chunk Names
    pages/index/404@2x.png  29.2 KiB          [emitted]

index.scss:

body {
  background: url("./pages/index/404@2x.png");
}

CSS 输出：

body {
    background: url([object Module]);
}

我的 WebPack 配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const outputDir = 'dist/website';
const publicPath = '/web/website/';

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './index.ts',
  output: {
    path: path.resolve(__dirname, outputDir),
    publicPath: publicPath,
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              sourcemap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      path: path.resolve(__dirname, outputDir),
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new CleanWebpackPlugin([outputDir]),
  ],
  devServer: {
    contentBase: path.join(__dirname, outputDir),
    publicPath: publicPath,
    port: 9009,
    proxy: {
      '/': 'http://127.0.0.1:5000/',
    },
  },
};

index.ts:

import './index.scss';

console.log('WebPack is working!');

Answer 1

我已经解决了问题：css-loader 的版本是 1.0.0。可能是很久以前安装的吧

使用 npm install css-loader@latest --save-dev 升级到最新版本的 css-loader 解决了这个问题。

WebPack：背景图片未加载

WebPack: Background image not loading

webpack

webpack-dev-server

mini-css-extract-plugin