Webpack + file-loader + sass-loaderはCSS背景画像の相対パスを解決できません。Webpackの相対CSS URL
コンパイルされたSCSSファイルには、SCSS/CSSドキュメントに対してではなく、/dist/に相対的な背景イメージへのパスが含まれています。私はこの問題を研究しました。 sass-loaderはresolve-url-loader（ソースマップを使用）を使用することを推奨します。しかし、resolve-url-loaderを追加しても、コンパイルされたCSSに違いはありませんでした。
ファイルローダーで 'publicPath'を '../ ..'に設定することで、この問題を解決できました。または、css-loaderの 'url'設定を無効にするどちらも良い解決策ではなく、HTMLやその他のソースを介してファイルをコピーしてイメージを参照する際に問題を引き起こします。
WebpackとCSSのオンラインの例では、CSSと画像を同じフォルダ（たいていはルート）に配置しています。これはWebpackの実装に最適な選択肢ではありません。サブフォルダにファイルを構造化するという概念は、かなり基本的な要件のようです。これは単に間違ったアプローチですか？
実行中のWebpack^3.5.1。 Sass-loader^6.0.6。ファイルローダー^ 0.11.2。 Css-loader^0.28.4。
ファイル構造
example/ ├── dist/ │ ├── assets │ │ ├── media │ │ │ └── logo.png │ │ └── styles │ │ ├── app.css │ │ └── app.css.map │ ├── index.html │ └── app.bundle.js └── src/ ├── assets │ ├── media │ │ └── logo.png │ └── styles │ └── app.scss └── app.js
app.scss
body { background: url(../media/logo.png); }
app.css
body { background: url(assets/media/logo.png); //This should be ../media/logo.png }
app.js
require('./assets/styles/app.scss');
webpack.config.js
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.bundle.js' }, devtool: 'source-map', module: { loaders: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'resolve-url-loader' }, { loader: 'sass-loader', options: { sourceMap: true } } ] }) }, { test: /\.png$/, use: [ { loader: 'file-loader', options: { name: 'assets/media/[name].[ext]' } } ] } ] }, plugins: [ new ExtractTextPlugin({ filename: 'assets/styles/app.css' }) ] }