Question

我真的变得疯狂了。我正在使用React/Node+Express应用，但我从来没有想到像sass加载图片这么简单的操作会非常复杂。

在我的根目录中，我有main.jsx，index.html和2个文件夹：＆＃34; public＆＃34; （包括css/js/img）和＆＃34; components＆＃34;包含header.jsx和其他人。现在，我想在我的header.jsx组件

中加载背景图片

header.jsx

import React from 'react'
require('../public/css/header.scss')

export default class Header extends React.Component {
    render() {
        return <header></header>
    }
}

为此，我已将mywebpack配置为加载sass：

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './main.jsx',
    output: {
        filename: './public/js/build/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },
            {
                test: /\.jpg$/,
                loader: "file-loader?name=[path][name].[ext]" 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('public/css/style.css', {
            allChunks: true
        })
    ]
};

然后，我的header.scss

header.scss

header {
    background-image: url('/public/img/header-bg.jpg');
}

要从我的节点服务器加载静态文件，我已经配置了我的文件夹：

server.js

app.use(express.static(__dirname + '/public'));

在我console我收到此错误：http://localhost:3000/public/img/header-bg.jpg 404 (Not Found)。我真的无法理解这种基本配置的错误。

ReactJs Node - 找不到Webpack sass-loader jpg 404

0 个答案: