参考 https://blog.csdn.net/weixin_33804990/article/details/93180165
以及官方 https://www.webpackjs.com/loaders/sass-loader/#problems-with-url
使用resolve-url-loader解析@import xxx.scss后的图片路径
const path = require('path')
const CleanPlugin = require('clean-webpack-plugin').CleanWebpackPlugin
const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 3000,
host: '0.0.0.0',
overlay: true,
hot: true
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
// options: { sourceMap: true }
},
{
loader: 'css-loader',
// options: { sourceMap: true }
},
{
loader: 'resolve-url-loader',
// options: { sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
},
]
},
{
test: /\.(jpg|png|svg|gif|webp)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}]
},
{
test: /\.html$/,
use: ['html-loader']
}
]
},
plugins: [
new CleanPlugin(),
new HtmlPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
}
只需要在sass-loader前面加上resolve-url-loader 并给sass-loader添加options:{ sourceMap: true }
