external-svg-sprite-loader icon indicating copy to clipboard operation
external-svg-sprite-loader copied to clipboard

Can't use URLs in CSS with Webpack 5.90

Open ver1000000 opened this issue 5 months ago • 0 comments

Hi. I'm updating my old project and faced an issue.

In Vue 3 style block I have: CleanShot 2024-09-26 at 15 13 40@2x Which transpiles into CleanShot 2024-09-26 at 15 13 08

If I open this file I see that instead of SVG it generates some code CleanShot 2024-09-26 at 15 16 29

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,
        },
      })
    );
  },
};

ver1000000 avatar Sep 26 '24 11:09 ver1000000