reactjs - 为什么我的 Webpack 不加载背景图片？

Question

我对 webpack 还很陌生，但是在 react 中遇到 css-loader 或 file-loader 的一些问题

我正在尝试加载背景图像，但它不能正常工作。即使 devtools 显示背景图像样式，也不会显示背景图像。

我正在尝试通过 React 中的 css 文件加载此背景图像： background: url('../../assets/img/1017.jpg') no-repeat right;

这是我的网络包配置：

[![const path = require("path");

module.exports =
{
    mode: "development",
    entry: path.resolve(__dirname,`src`, `app`),
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath:'/'
    },
    resolve: {
        extensions: \['.js','.jsx'\]
    },
    devServer:{
        historyApiFallback: true
    },
    module: {
        rules:\[{
            test: /\.jsx?/,
            loader:'babel-loader',
            exclude: '/node_modules'
        },
        {
            test: /\.(jpg|png)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 25000,
              },
            },
          },

          {
            test: /\.(jpg|png)$/,
            use: {
              loader: "file-loader",
              options: {
                name: "\[path\]\[name\].\[hash\].\[ext\]",
              },
            },
          },
        {
            test:/\.css$/,
            use:\['style-loader','css-loader',\]
        },
       \]
    },

}

标签： reactjswebpackcss-loaderwebpack-file-loader

Answer 1

您在background-image属性中添加了no-repeat和center值，您可以使用background属性。