使用 webpack 在导入的 css 文件中包含图像答案

【问题标题】：Including an image in imported css file in react using webpack使用 webpack 在导入的 css 文件中包含图像
【发布时间】：2021-02-26 10:09:08
【问题描述】：

好的，所以我一直在阅读一篇又一篇文章，并没有找到一个好的解决方案，开发网络应用程序应该是一个非常简单的过程......

我已经设置了 webpack、babel、react，在我的 react 应用程序中，我有一个非常基本的 css 导入。我已经导入了图像，它位于 src/static/assets/images/bg.png 中，我可以使用内联 css 将它嵌入到我的反应组件中而不会遇到麻烦。但是，我想从包含的 css 文件中包含我的图像。解析了 css 文件，但是当我弄乱包含的 css 中的路径时，我收到错误“模块构建失败”和无法解析“./bg.png”或非常类似的路径错误。我已经安装了文件加载器和 url-loader，并且文件被移动到 dist/ 文件夹路径中（虽然老实说，我宁愿在 dist 中有一个 images/ 文件夹，但这是另一项任务。

因此，任务：需要更改哪些内容才能将图像包含在 css 中。我读过https://create-react-app.dev/docs/adding-images-fonts-and-files/，这暗示我的代码应该可以工作，但它没有。

代码如下，或者如果你想要整个代码库，可以从我的仓库中获取：https://github.com/abendago/reactimages

反应代码

import React from "react";
import './css/style.css'
import bg from './static/assets/images/bg.png'
function App() {
    return (
      <h1 style={{backgroundImage: "url(" + bg + ")"}}>In THe App Here</h1>
    );
  }

export default App;

src/css/style.css

body { background-image: url(./bg.png)}

webpack 配置

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

【问题讨论】：

您正在将图像导入组件中，您只能在其中使用它。尝试在 style.css body { background-image: url(../your_exact_path/bg.png)} 中给出绝对 url

标签： javascript reactjs webpack

【解决方案1】：

您可能想要安装 file loader 和 image-webpack-loader 并更新您的 webpack 配置以反映以下内容。

{
        test: /\.(png|gif|jpe?g)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpege: {
                progressive: true,
                quality: 80,
              },
              optipng: {
                enabled: false,
              },
              pngquant:{
                 quality: '65-90',
                 speed: 4,
              },
            }
          }
        ]
      }

虽然我认为你的图片在 css 中引用时不会加载，因为你没有引用它。将 body { background-image: url(./bg.png)} 替换为 body { background-image: URL('./bg.png')} - @ 987654321@

【讨论】：

单引号和双引号都有区别，我试过了，也试过了。我会试试你的新配置。

【解决方案2】：

您必须设置图像的相对路径才能解决您的问题，因为当前您的路径与任何东西都没有关系：

body { background-image: url('../static/assets/images/bg.png')}

【讨论】：