WebPack:背景图像未加载 [英] WebPack: Background image not loading

问题描述

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

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

我尝试在 MiniCssExtractPlugin.loader 中设置 publicPath 选项，并查看了我能找到的与此问题相关的所有答案，但没有得到这个工作.

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

更新:当在 SCSS 中使用绝对路径时，它会编译为 CSS 作为该确切路径，但这不会起作用，因为本地开发和 staging 和 prod 都有不同的路径.>

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

子 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:资产大小块块名称pages/index/[e-mail] 29.2 KiB [发出]

index.scss:

body {背景: url("./pages/index/[e-mail]");}

CSS 输出:

body {背景: url([对象模块]);}

我的 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/';模块.出口 = {模式:'发展'，开发工具:'源地图'，条目:'./index.ts'，输出: {路径:path.resolve(__dirname, outputDir),公共路径:公共路径，文件名:'bundle.js',},解决: {扩展名:['.ts', '.js'],},模块: {规则: [{测试:/\.ts$/,使用:['ts-loader']，},{测试:/\.scss$/,用: [{加载器:MiniCssExtractPlugin.loader，},{加载器:'css-加载器'，选项: {源地图:真实，},},{loader: 'sass-loader',选项: {源地图:真实，},},],},{测试:/\.(png|jpe?g|gif|svg|webp)$/i,用: [{加载器:'文件加载器'，选项: {name: '[path][name].[ext]',},},],},],},插件: [新的 MiniCssExtractPlugin({路径:path.resolve(__dirname, outputDir),文件名:'[名称].css'，chunkFilename: '[id].css',}),新的 CleanWebpackPlugin([outputDir]),],开发服务器:{contentBase: path.join(__dirname, outputDir),公共路径:公共路径，端口:9009，代理: {'/': 'http://127.0.0.1:5000/',},},};

index.ts:

import './index.scss';console.log('WebPack 正在工作！');

解决方案

我已经解决了这个问题:css-loader 的版本是 1.0.0.可能是因为它是很久以前安装的.

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

Trying to load a CSS background image, defined in SCSS, and serving via WebPack devServer.

The background image defined in SCSS is picked up by WebPack, but it doesn't show on the page.

I have tried setting publicPath option in MiniCssExtractPlugin.loader and looked at all the answers I could find related to this problem, but haven't been able to get this to work.

Update: Also tried setting publicPath option in file-loader. According to the documentation this defaults to the output publicPath, which is the same in my case.

Update: When using an absolute path in SCSS it compiles to CSS as that exact path, but that isn't going to work as local dev and staging and prod all have different paths.

Relevant part of the output when running 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/[e-mail]  29.2 KiB          [emitted]  

index.scss:

body {
  background: url("./pages/index/[e-mail]");
}

CSS output:

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

My WebPack config:

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!');

解决方案

I have figured out the issue: css-loader was on version 1.0.0. Probab ly because it was installed a long time ago.

Upgrading to the latest version of css-loader with npm install css-loader@latest --save-dev solved the issue.

这篇关于WebPack:背景图像未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！