0

背景画像を含むファイルをロードするために webpack sass-loaderを使用しようとしています。.scssの一部.scssは

.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構成ファイルの対応するローダーは次のように設定されています

  {
    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 の出力フォルダーは、フォルダーdistと同じレベルsrcです。

問題は、使用するbackground: url(require("../../../images/cloud_two.png"));とエラーは発生しませんが、背景画像が表示されないことです。

を使用するbackground: url("../../../images/cloud_two.png");と、404 エラーが発生しますhttp://localhost:8080/images/cloud_two.png。

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

4

1 に答える 1

1

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

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

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

注: のパスはurl()、webpack の出力フォルダーに対する相対パスです。例えば。私の出力フォルダは

dist
    /assets
        cloud_two.png
    main.bundle.js
    vendor.bundle.js
    polypill.bundle.js
于 2016-07-23T16:22:05.090 に答える