Webpack：scssファイルの背景画像を表示しない

Question

webpack sass-loaderを使用して、背景画像を含む.scssファイルを読み込もうとしています。 .scssの一部は

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
    }, 
    { 
     test: /\.(png|jpg|gif)$/, 
     loader: 'url-loader?limit=8192' 
    }, // inline base64 URLs for <=8k images, direct URLs for the rest 

マイ.scssファイルがsrc/app/components/login/であり、画像がsrc/images/である

として設定されている私のWebPACKの設定ファイルの

.clouds_two { 
    background: url(require("../../../images/cloud_two.png")); //no error, just not display 
    //background: url("../../../images/cloud_two.png");  // 404 error 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 300%; 
    -webkit-animation: cloud_two 75s linear infinite; 
    -moz-animation: cloud_two 75s linear infinite; 
    -o-animation: cloud_two 75s linear infinite; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0) 
} 

対応ローダーのようなものです。 Webpack出力フォルダはdistで、srcフォルダと同じレベルです。

問題は、私がbackground: url(require("../../../images/cloud_two.png"));を使用すると、エラーはありませんが背景画像は表示されません。

background: url("../../../images/cloud_two.png");を使用している場合、http://localhost:8080/images/cloud_two.pngと不平を言っている404エラーがあります。

sass-loaderのreadmeにはProblems with url(...)セクションがありますが、私の場合は修正できません。

Answer 1

私はそれを理解します。このwebpack.common.jsファイルでは、CopyWebpackPluginはファイルとディレクトリをwebpackにコピーできます。

new CopyWebpackPlugin([{ 
    from: 'src/assets', 
    to: 'assets' 
}]), 

パスがプロジェクトの構造と一致しませんでした。私がそれを変更した後、私の.pngをwebpackにコピーすることができます。そして私の.scssファイルでは、background: url("assets/cloud_two.png");が私のために働いています。

注：url()のパスは、webpack出力フォルダからの相対パスです。例えば。私の出力フォルダは次のようなものです

​​