Question

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

从技术上讲，一切都运转正常，除了这种情况会自动发生：

在我的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之后，它会更进一步，但仍然无法完全发挥作用。它显示了文件名，我可以手动打开它，但它在实际页面中被划掉并且不显示：

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

Answer 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",

Answer 2

在没有ignore-loader的情况下，在图像的相对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

react / scss body background-image成为[object Object]

2 个答案: