Webpack + file-loader + sass-loader在解析CSS背景圖片的相對路徑時遇到了麻煩。Webpack中的相對CSS url
編譯後的SCSS文件包含背景圖像的路徑，該路徑相對於/dist/而不是相對於SCSS/CSS文檔。我研究了這個問題; 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' }) ] }