Vue Loader: Multiple loaders for a single file extension

Currently, I'm experimenting with incorporating SVG into my vue-loader/webpack template project.

I'm in need of loading different types of SVGs:
Icons: these are utilized within my components and loaded using svg-inline loader for customization with CSS.
SVGImages: used within img tags or background images loaded with url loader like other image files.

I attempted the following setup within webpack.base.conf.js:

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        resourceQuery: '/normal/',
        use: 'url-loader'
      }
    ]
  }

However, I encountered an error message stating: "You may need an appropriate loader to handle this file type."

The error specifically pertains to an SVG used in a background image, while the svg inline loader appears to be functioning correctly.

Thank you for any assistance provided.

Answer №1

If you want to load an SVG file without a query string, it is recommended not to use the resoueceQuery. Here's how you can configure it:

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        use: 'url-loader'
      }
    ]
}

This setup will handle the following scenarios:

  • image.svg?ico – handled by svg-inline-loader
  • image.svg – processed by url-loader
  • image.svg?foo – also handled by url-loader

You can refer to this webpack issue for more details: https://github.com/webpack/webpack/issues/3497

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the jQuery mouseenter events to be activated in a random sequence?

I currently have a setup of 3 nested divs, resembling the concept of a Matryoshka doll. Each div has a mouseenter event function bound to it. When moving the mouse slowly from the bottom and entering layer three, the events occur in the following sequence ...

My attempt at utilizing the regex function was unsuccessful

When attempting to use a regex function for matching tags in the title and caption, it appears to work fine. However, adding more matching tags causes the function to fail. Below is the code snippet that functions correctly without any issues: $(".si ...

Creating a JSON schema in JavaScript using an already established JSON framework

I have a json structure stored in a variable called "data" that looks like this: { "SearchWithMasterDataDIdAndScandefinitionDAO": [ { "dateDm_id": 20120602, "issueValue": "ELTDIWKZ", "scanName": "Company Stored as Person (Give ...

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

This is my current code snippet: async function main(){ for(int=0;int<50;int++){ const allLinks = await getLinks(); //console.log(allLinks); const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPa ...

The server encountered an unexpected error while processing the request, possibly due to a

My JavaScript file includes an interval function that calls the following code: setInterval(function() { $.getJSON('/home/trackUnreadMsgs', function(result) { $.each(result, function(i, field) { var temp = "#messby" + result[i].from; ...

During the process of adding a new template to my Angular project, I came across an issue within the core.min.js and script.js files

index.html <html class="wide wow-animation" lang="en"> <body> <app-root></app-root> <!-- Javascript--> <script src="assets/js/core.min.js"></script> <script src="assets/js/script.js"></script& ...

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

How can recursion be implemented when the items are interdependent?

I am looking to create a function that can generate a list of individuals upon whom a specific person relies. The complexity here lies in the fact that these individuals may, in turn, rely on the original person. To illustrate: const people = { ' ...

Vue.js not responding to "mousedown.left" event listener

I am trying to assign different functionalities to right and left click on my custom element. Within the original code, I have set up event listeners for mouse clicks in the element file: container.addEventListener("mousedown", startDrag); conta ...

Incorporate a unique identifier $id within the ajax request

Whenever I make changes to my product, I would like the categories to show up in a dropdown menu. Currently, it only displays: -- Select your category -- For instance, if my $current_category_id = 2, I want the dropdown to show the relevant categories. ...

Easy Laravel File Explorer

Is there a way to display files and folders recursively in a browser? For example, if I specify a directory/path, it would load all subfolders and files within that folder. I'm looking for a straightforward file manager for browsing files and folders ...

How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...

emailProtected pre-publish: Running `python build.py && webpack` command

i am currently using scratch-blocks through the Linux terminal I have encountered a problem which involves running the following command: python build.py && webpack [email protected] prepublish: python build.py && webpack Can anyon ...

Error: Unable to locate module: Material-UI - Please check the path and try again

Encountering this error: Error message: Failed to compile ./node_modules/@material-ui/core/Modal/Modal.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'C:\Users\rifat\ ...

Pair a specific portion of text with another string

I'm having trouble finding a substring within a string. The substring and the string are as follows: var str="My name is foo.I have bag(s)" var substr="I have bag(s)" When I use str.match(substr), it returns null, probably because the match() funct ...

Has Chrome's console disappeared?

After reinstalling Chrome and opening the dev tools with F12, I encountered an error with the following code: console.debug('test'); The error message displayed was Uncaught ReferenceError: console is not defined(…) This issue persisted acro ...

What's causing this sluggish performance?

I'm in the process of developing a Google Chrome extension and I can't help but wonder why window.onload = loadPage; function loadPage() { document.getElementById('nav-robux-amount').innerHTML = '0'; console.log(" ...

Tips for bringing in a local dependency using yarn

I currently have 2 ongoing projects: ProjectA: a front-end project built with Vue.js ProjectB: a JavaScript module that I intend to use as a library in Project A I successfully built ProjectB and proceeded to run yarn link In the package.json file of P ...

PHP dropdown menu - Retrieve data from second database and display it

Currently, I am working on a project that involves both Vue.js 3 and Laravel 9. In this project, there are two database tables - Employee and Company. The company table consists of only an ID and the company name. On the other hand, the Employee table inc ...

Steps to invoke a function repeatedly for an animation

I found this code snippet while browsing a forum post about CSS animations. The question asked if it was possible to create a button that would restart the animation when clicked, even if it is in the middle of playing. They specifically requested no jQu ...