external-svg-sprite-loader
external-svg-sprite-loader copied to clipboard
Can't use URLs in CSS with Webpack 5.90
Hi. I'm updating my old project and faced an issue.
In Vue 3 style block I have:
Which transpiles into
If I open this file I see that instead of SVG it generates some code
vue: 3.5.3
external-svg-sprite-loader: 7.1.2
webpack: 5.90.1
vue.config.js:
const path = require("path");
const fs = require("fs");
const SvgStorePlugin = require("external-svg-sprite-loader");
const routes = require("./utils/routes.js");
const productionMode = process.env.NODE_ENV === "production";
const stageMode = process.env.NODE_ENV === "stage";
const VueAutoRoutingPlugin = require("vue-auto-routing/lib/webpack-plugin");
const SitemapPlugin = require("sitemap-webpack-plugin").default;
const sitemapJSONFile = "./public/sitemap.json";
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
publicPath: !process.env.localBuild && (productionMode || stageMode) ? "/dist/" : "/",
assetsDir: "assets",
productionSourceMap: false,
css: {
extract:
productionMode || stageMode
? {
filename: "assets/css/[name].[contenthash:10].css",
chunkFilename: "assets/css/[id].[contenthash:10].css",
}
: false,
},
chainWebpack: (config) => {
function addLoader(params) {
params.types.forEach((type) => {
config.module
.rule(params.rule)
.oneOf(type)
.use(params.loader)
.loader(params.loader)
.options(params.options)
.end();
});
}
config.plugins.delete("prefetch");
config.module.rules.delete("svg");
config.module
.rule("svg")
.test(/\.svg$/)
.include.add(resolve("src/assets/svg/"))
.end()
.exclude.add(resolve("src/assets/svg-sprites/"))
.end()
.use("babel-loader")
.loader("babel-loader")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader")
.options({
svgo: {
plugins: [
{ removeDoctype: true },
{ removeComments: true },
{ removeViewBox: false },
{ cleanupIDs: false },
{ collapseGroups: false },
{ removeEmptyContainers: false },
{ convertShapeToPath: false },
],
},
})
.end();
config.module
.rule("svg-sprites")
.test(/\.svg$/)
.include.add(resolve("src/assets/svg-sprites/"))
.end()
.use("SvgStorePlugin")
.loader(SvgStorePlugin.loader)
.options({
iconName: "[name]-usage",
name: "assets/img/sprite.svg",
})
.end();
config.module
.rule("images")
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
.include.add(resolve("src/assets/images/"))
.end();
config.module
.rule("fonts")
.test(/\.(woff(2)?|ttf|svg|eot)(\?.*)?$/i)
.include.add(resolve("src/assets/fonts/"))
.end();
config.module
.rule("json")
.test(/\.json$/)
.use(resolve("utils/split-json-loader.js"))
.loader(resolve("utils/split-json-loader.js"))
.options({
dir: resolve("src/data"),
})
.end();
addLoader({
types: ["vue-modules", "vue", "normal-modules", "normal"],
rule: "scss",
loader: "sass-resources-loader",
options: {
includePath: resolve("src"),
resources: "./src/scss/_common.scss",
},
});
// config.optimization.splitChunks({
// cacheGroups: {
// vendor: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendor',
// chunks: 'all',
// },
// },
// });
// Vue 2 support (for social sharing)
config.resolve.alias.set("vue", "@vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
};
});
},
configureWebpack(config) {
if (productionMode || stageMode) {
config.output.filename = "assets/js/[name].[contenthash:10].js";
config.output.chunkFilename = "assets/js/[name].[contenthash:10].js";
} else {
config.devtool = "source-map";
}
config.plugins.push(
new SvgStorePlugin({
sprite: {
startX: 10,
startY: 10,
deltaX: 20,
deltaY: 20,
iconHeight: 20,
},
})
);
},
};