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

我不確定發生了什麼，但我查看的其他問題都沒有幫助，所以我認爲這是新東西。基本上，我試圖爲我的react-dom項目的Webpack中加載的scss文件中的<body>元素設置背景圖像。react/scss body background-image變成[object Object]

技術上的一切工作得很好，除了某些原因自動發生這種情況：

在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，它會遠一點，但仍不能完全工作。它顯示的文件名，我可以手動打開它，但它在實際的頁面劃掉並沒有出現：

但是，當我直接打開它，它的工作：

來源

2017-10-13 Juha Untinen

也許嘗試https://www.npmjs.com/package/image-webpack-loader，而不是忽略裝載機？ –

@RobbieMilejczak我實際上只是做了，並且得到了一個類似的模塊加載器錯誤：'''ERROR in ./src/static/img/background.jpg 模塊解析失敗：C：\ Juha \ project \ node_modules \ image-webpack-loader \ index.js！C：\ Juha \ project \ src \ static \ i mg \ background.jpg意外字符'？' （1：0）'' –

嘗試使用文件加載器的JPG而不是圖像加載器，我絕對認爲問題是如何webpack處理您的圖像 –

在不使用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

來源

2017-10-13 20:12:08 kngroo

就像我在帖子中提到的那樣，我也是這樣試過的。 –

好吧，下面@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",

來源

2017-10-13 20:22:04

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

回答

相關問題