1

我真的要疯了。我正在开发一个React/Node+Express应用程序，但我从未想过像从中加载图像这样简单的操作sass会如此复杂。

在我的根目录中，我有main.jsx,index.html和 2 个文件夹：“ public”（包括css/js/img）和“ components”，其中包含header.jsx和其他。现在，我想在我的header.jsx组件中加载背景图片

头文件.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

头文件.scss

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

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

服务器.js

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

在我的console我得到这个错误：http://localhost:3000/public/img/header-bg.jpg 404 (Not Found)。我真的无法理解这个如此基本的配置有什么问题。

4

0 回答 0