我对 webpack5 和背景图像的使用有疑问。问题比较老,但我是一个相对较新的 webpack 用户。一旦我想集成背景图像,我就会得到信息:
background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
// Exports
2278 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
在控制台中。
这是我的 webpack.config 文件
module.exports = {
entry: entryPoints,
output: {
path: path.resolve(__dirname, outputPath),
filename: '[name].js',
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
// Uncomment BrowserSyncPlugin if not wanted
new BrowserSyncPlugin({
proxy: localDomain,
files: [ outputPath + '/*.css' ],
injectCss: true,
},
{
reload: true,
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
outputPath + '/*',
]
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.s?[c]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer
]
}
}
}
],
},
{
test: /\.sass$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: { indentedSyntax: true },
},
},
],
},
{
test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
type: 'javascript/auto'
},
]
},
optimization: {
minimizer: [
`...`,
new CssMinimizerPlugin(),
]
},
};
有人可以帮助我吗?我花了几个小时来解决这个问题,但没有任何效果......
我在互联网上找到了几种解决方案,但没有一个能解决我的问题
MiniCssExtractPlugin.loader, <= remove
'style-loader',
'css-loader',
MiniCssExtractPlugin.loader
不能与style-loader
一起使用。
使用
style-loader
:
'style-loader',
'css-loader',
或者
MiniCssExtractPlugin.loader
:
MiniCssExtractPlugin.loader,
'css-loader',