在 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没有深入的了解,但是我认为文档一目了然不是特别直观。
更新(感谢评论中的用户):
现在有一个新选项,您可以使用
/* webpackIgnore: true */
注释从 Webpack 解析中排除特定 url:
.class {
/* webpackIgnore: true */
background: url("./url/img.png");
}
我认为 Webpack 5
css-loader
默认解决了这个 url()
调用,你需要手动禁用它:
loader: "css-loader",
options: {
// Add this option
url: false,
},
也许您的其他加载器也有相同的选项,但我很确定您只需要为
css-loader
禁用它即可。