react/scss body background-image 变成 [object Object]答案

【问题标题】：react/scss body background-image becomes [object Object]react/scss body background-image 变成 [object Object]
【发布时间】：2017-10-13 18:13:49
【问题描述】：

我不确定发生了什么，但我检查过的其他问题都没有帮助，所以我认为这是新事物。基本上，我试图为我在 Webpack 中为我的react-dom 项目加载的scss 文件中的<body> 元素设置背景图像。

从技术上讲，一切正常，除了某些原因自动发生：

在scss 文件中我有：

body {
    background-image: url(static/img/background.jpg) silver;
    background-size: contain;
    color: white;
}

我也尝试过url("static/img/background.jpg")，结果相同。

项目目录结构为：

webpack.config.js：

let webpack = require('webpack');
let path = require('path');

let BUILD_DIR = path.resolve(__dirname, 'src');
let APP_DIR = path.resolve(__dirname, 'src');

let config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: APP_DIR,
        port: 8100,
        historyApiFallback: true
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            }, {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            }, {
                test: /\.jpg$/,
                loader: 'ignore-loader'
            }
        ]
    }
};

module.exports = config;

package.json 依赖：

"dependencies": {
    "axios": "^0.16.2",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.7",
    "follow-redirects": "1.2.5",
    "ignore-loader": "0.1.2",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.6",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-modal": "3.0.0",
    "react-router-dom": "4.2.2",
    "react-tap-event-plugin": "3.0.2",
    "style-loader": "0.19.0",
    "webpack": "^3.7.1",
    "webpack-dev-server": "2.9.1",
    "webpack-windows": "0.0.3"
},

我使用ignore-loader，因为没有它我会收到这个奇怪的错误：

ERROR in ./src/static/img/background.jpg
Module parse failed: C:\Juha\project\src\static\img\background.jpg Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/main.scss 6:62-100
 @ ./src/main.scss
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8100 webpack/hot/dev-server ./src/index.jsx

更新
按照使用file-loader 的提示，它走得更远，但仍然不能完全工作。它显示了文件名，我可以手动打开它，但它在实际页面中被划掉并且没有出现：

但是当我直接打开它时，它确实有效：

【问题讨论】：

也许试试npmjs.com/package/image-webpack-loader而不是ignore-loader？
@RobbieMilejczak 我实际上刚刚做了，并得到了类似的模块加载器错误：ERROR in ./src/static/img/background.jpg Module parse failed: C:\Juha\project\node_modules\image-webpack-loader\index.js!C:\Juha\project\src\static\i mg\background.jpg Unexpected character '?' (1:0)
尝试使用文件加载器代替图像加载器，我绝对认为问题在于 webpack 如何处理您的图像
@RobbieMilejczak 嗯，这似乎可以正常工作，因为它显示了一个随机生成的文件名，但它仍然显示为被划掉而不是在实际页面中。如果我直接从 localhost:8100/filename.jpg 打开它，它就会出现。我会更新问题以更好地展示它。
好的，当我使用 background: url("static/img/background.jpg"); 而不是 background-image: url("static/img/background.jpg"); 时，它可以与 file-loader 一起使用

标签： reactjs webpack sass

【解决方案1】：

好的，按照@RobbieMilejczak 的提示使用file-loader，我得到了它：

scss:

body {
    /*
    Note that I use "background" instead of "background-image".
    It seemed to be the issue, for some reason. 
    */
    background: url("static/img/background.jpg");
    background-size: contain;
    color: white;
}`

webpack.config.js：

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }, {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        }, {
            test: /\.json$/,
            loader: 'json-loader'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'file-loader'
        }
    ]
}

使用：

"file-loader": "1.1.5",

【讨论】：

【解决方案2】：

在没有忽略加载器的情况下，在图片的相对 url 路径周围使用引号。

body {
    background-image: url("static/img/background.jpg") silver;
    background-size: contain;
    color: white;
}

编辑：

还将 publicPath 添加到您的 webpack 配置的输出中。

见：https://webpack.js.org/configuration/output/#output-publicpath

【讨论】：

就像我在帖子中提到的那样，我也尝试过。