0

SASSを使用し、Webpack 1を使用するReact.jsのプロジェクトがあります。

すべての画像と他のアセットのフォルダーを含む画像フォルダーがあります。

webpack で画像を処理したくありません。実行時に URL で読み込まれるようにしたいのです。私はjsxコードで（インポートするのではなく）インラインで画像のURLを使用してJSXで解決しましたが、うまく機能しています。

しかし、SASSで同じことをしようとすると、違います.以前は絶対パス /images/abc.png でそれらを参照していましたが、うまくいきました。私はそれらのための webpack ローダーさえ持っていませんでした。しかし、私はそれを相対パス ../../www/images/abc.png に変更しなければなりませんでした. file-loader を使用してみましたが、sass で使用されているすべてのイメージがビルド フォルダーにコピーされます。url-loader を使用してみましたが、結果の css ファイルに画像が含まれており、非常に肥大化していました。

では、sass からの画像を無視して、実行時に URL でアドレス指定するにはどうすればよいでしょうか?

ありがとう

4

1 に答える 1

1

1 つの可能性は、urlオプションcss-loaderを false に設定して、webpack が URL にアクセスしないようにすることです。のルールは次の.scssようになります ( を使用すると仮定extract-text-webpack-plugin):

ウェブパック 1:

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?url=false!sass-loader')
},

ウェブパック 2:

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { url: false } },
      { loader: 'sass-loader' }
    ]
  })
}

ただし、それは画像だけでなくすべての URL を無視します。それが問題である場合はfile-loader、オプションを使用しemitFile: falseてファイルをコピーしないようにすることができます。ただし、正しいパスを取得するには、いくつかの回避策が必要です。名前で使用[path]する場合、 からの相対パスが使用されますcontext。ディレクトリ (例: ) にビルドするため、オプションを設定しbuild/て 1 つ上のディレクトリ ( ) に移動する必要があります。これにより、次のルールが得られます。../publicPath

ウェブパック 1:

{
  test: /\.png/,
  loader: 'file-loader?emitFile=false&name=[path][name].[ext]&publicPath=../'
},

ウェブパック 2:

{
  test: /\.png/,
  loader: 'file-loader',
  options: {
    emitFile: false,
    name: '[path][name].[ext]',
    publicPath: '../'
  }
}

contextWebpack 構成で設定した場合、または出力 CSS ファイルがビルド ディレクトリの複数のレベルにある場合は、オプションを微調整する必要がありますpublicPath。

于 2017-03-10T02:47:36.173 に答える