在SASS中,我有一个带有URL的CSS规则,看起来像这样:
.eSearchFAQsAccord-q {
&::after {
content: url("./images/caret.svg");
}
}
默认情况下,Webpack会解析它(尽管它对我的SVG文件产生了问题)。我希望Webpack不要解析它。我希望浏览器从我的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的了解不够深入,但我认为文档并不是一眼就能看懂的。
.css
文件中实现content
,但这对我来说似乎是一个变通方法... 将来,我应该询问是否有一个设置,可以在我的SASS/SCSS中完成这个操作。这可能吗? - BBaysinger