0
CSSとそのURL機能を使用してReactJSプロジェクトのコントロールにバックグラウンドイメージを追加しようとしています。CSSでイメージURLを使用するとReact appがコンパイルできない
.jumbotron {
background-image: url(../images/image.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
color: 6b6b6b;
}
ただし、バイナリファイルを解析しようとしているため、ローダーが壊れています。予期しないチャー。背景行とすべての作品を削除します。
私はWebPACKのを使用していますし、私のモジュールは、次のようにロードされます
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
]
}
は、どのように私は私のバックグラウンドURLとしてこのCSSのイメージで動作するアプリを反応させ得ることができますか？ create-react-appでプロジェクトを作成すると機能しますが、画像の処理方法はわかりません。 https://github.com/CraigInBrisbane/ReactLearning
どのような援助は素晴らしいことだ：
私はレポを持っています。
てはならないことをスキップします代わりに
background-image: url(/images/image.jpeg);（相対）とCSS-ローダーの絶対パスを使用してこれらのタイプのファイルのためのfile-loader/url-loaderを追加します。この問題を解決するには2つの方法があります'url（ "../ images/image.jpeg"） 'とする？引用符に注意してください。 – Leandro私はそれを試すことができますが、それはcreate-react-appを使ってプロジェクトを作成したときに（引用符なしで）そのように働いていました。今では、プロジェクト構造を手動で作成し、自分のwebpack.configなどを作成し、必要と思うモジュールを引き出します。失敗します。同じCSS。 – Craig
'url-loader'を使ってみましたか？ – cowCrazy