背景图像 URL 未使用 Webpack 加载

Question

基本上我试图在容器的背景中显示图像，但它没有加载。我尝试了各种路径，因为我并不完全清楚 URL 需要相对于什么：package.json、webpack.config.js、React 组件或 login.scss 我在工作。

除了 webpack.config.js:

我还会提供目录结构

/app
    /src
        /assets
            /img
                slide_blue.png
            /scss
                login.scss
        /config
            webpack.config.js
        /react
            /containers
                /authentication
                    signin.js
            index.js // entry point
    package.json

到目前为止，login.scss 很短，其他样式有效：

// logic.scss
@import 'declarations';

.login {
    height: 381px;
    // tried just about every combination of path... this is just the last one I tried
    background-image: url('/src/assets/img/slide_blue.png') !important;

    form {
        padding-top: 75px;
        padding-bottom: -75px;
    }
}

最后 webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const VENDOR_LIBS = [
  'axios', 'history', 'lodash', 'prop-types', 'react', 'react-dom', 'react-dropzone', 'react-redux', 'react-router-dom', 'react-router-redux', 'redux', 'redux-form', 'redux-thunk', 'reactstrap'
]

module.exports = {
  context: __dirname,

  entry: {
    app: '../react/index',
    vendor: VENDOR_LIBS
  },

  output: {
      path: path.resolve('./src/assets/bundles/'),
      filename: './js/[name].[chunkhash].js'
  },

  module: {
    rules: [
      { 
        loader: 'babel-loader',
        test: /\.js$/, 
        exclude: /node_modules/, 
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.json$/,
        loader: ['json-loader'] 
      },
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'] 
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })      
      },   
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new BundleTracker({filename: './src/config/webpack-stats.json'}),
    new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
  ],
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json', '.gif', '.png'],
  },
}

我在这里缺少什么阻止 background-image: url(...) 显示？

编辑

以防万一的 React 组件：

    return (
        <div className='login'>
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                {this.renderAlert()}
                <Field 
                    label='Username'
                    name='username'
                    type='username'
                    component={this.renderField} 
                />
                <Field 
                    label='Password' 
                    name='password'
                    type='password' 
                    component={this.renderField} 
                />
                <div className='row'>
                    <div className='col-sm-2'>
                        <button type='submit' className='btn btn-primary'>Sign in</button>
                    </div>
                    <div className='col-sm-10 pull-right'>
                        <ul className='pull-right signin'>
                            <li><Link to='/auth/username'>Username Recovery</Link></li>                
                            <li><Link to='/auth/password'>Password Reset</Link></li>                                
                            <br />
                            <li><Link to='/auth/new_account'>New Accounts</Link></li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    );

编辑 2

我在 webpack.config.json 中添加了以下内容：

  {
    test: /\.png|jpg$/,
    include: path.join(__dirname, 'assets/img'),
    loader: ['file-loader'] 
  },

并更新 background-image: url(...) 以相对于我的入口点 index.js:

background-image: url('/../assets/img/slide_blue.png');

不产生错误并且不加载图像。

尝试了以下并产生了相应的错误：

background-image: url('../assets/img/slide_blue.png');
Module not found: Error: Can't resolve '../assets/img/slide_blue.png' in '/mnt/c/dev/current/app/src/assets/scss'

也给了这个产生相应错误的镜头：

background-image: url('../../assets/img/slide_blue.png');
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

所以仍然不确定发生了什么。我一直在执行以下操作将图像加载到我的组件中，这让我质疑它是否正确（但这是另一个问题）：

import logo from '!!url-loader!../../../assets/img/logo.png';

Answer 1

你需要 file-loader to handle the image files:

{ 
    test: /\.(png|jpg)$/,
    include: path.join(__dirname, 'assets/img'),
    loader: 'file-loader' 
 }

路径将相对于您的入口点。

Answer 2

您需要将 url: true 选项传递给 css-loader 并导入 css 文件作为 import ''

{ 测试：/.css$/, 采用： [ "style-loader", { 装载机：“css-loader”，选项： { 进口：真实， url：正确 } }, ] },

背景图像 URL 未使用 Webpack 加载

background-image URL not loading using Webpack

css

reactjs

webpack

webpack-style-loader

sass-loader