禁用解析Webpack 5中的CSS/ASS/SCSS/LESS URL

Question

在SASS中，我有一个CSS规则，它的URL看起来像：

.eSearchFAQsAccord-q {
&::after {
content: url("./images/caret.svg");
}
}

默认情况下，Webpack会解决这个问题(尽管它阻塞了我的SVG(。我希望它不会解决。我希望浏览器从我的static目录中单独加载此图像。

我不知道该怎么说我迄今为止所做的努力。我在我的Webpack配置中尝试了很多来自网络的设置，但都不起作用。。。

这是我的Webpack配置，我认为它非常开箱即用：

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
mode: "development",
entry: {
index: `./src/index.js`,
},
target: "web",
output: {
path: `${__dirname}/dist`,
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: "static" }],
}),
],
devServer: {
hot: true,
inline: true,
host: "localhost",
port: 8080,
watchOptions: {
poll: true,
},
},
module: {
rules: [
{

test: /.s[ac]ss$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
},
{
test: /.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};

我确信我的问题是因为我对Webpack没有深入的了解，但我认为文档不是特别直观。

Answer 1

我认为Webpack 5css-loader默认解析此url()调用，您需要手动禁用它：

loader: "css-loader",
options: {
// Add this option
url: false,
},

更多文档

也许你的其他加载程序也有相同的选项，但我敢肯定你只需要为仅css-loader的禁用它