question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extract mode dosen't work in Windows 10

See original GitHub issue

My development environment :

Windows 10 Node 7.10.0 NPM 4.6.1

Webpack config:

module.exports = {
...
  module: {
    rules: [
      ...
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'icons-[chunkname]-sprite.svg'
        }
      } 
    ]
  },
  plugins: [
    new SpriteLoaderPlugin()
  ]
}

Package version:

    "svg-sprite-loader": "^2.1.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.3.3",
    "webpack-bundle-analyzer": "^2.8.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"

Code Sample:

<template>
  <div id="app">
    <img src="./assets/logo.svg">
    <hello></hello>
    <div class="logo"></div>
  </div>
</template>

<script>
  import Hello from './components/Hello'
  import Logo from './assets/logo.svg'
  console.log(Logo)
  export default {
    name: 'app',
    components: {
      Hello
    },
    mounted() {
      console.log(Logo)
    }
  }

</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  img{
    width: 100px;
    height: 100px;
    background: #eee;
  }
  .logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-image: url('./assets/logo.svg');
    background-color: #eee;
  }

</style>

Output: This gived right output:

import Logo from './assets/logo.svg'
 console.log(Logo)

But these two gived wrong output: image

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
WalterZoucommented, May 21, 2017

@kisenka Sorry for reply so late, setting esModule: false fixed the output imported from html and css, but, the sprite file was empty which means that sprite failed.

0reactions
WalterZoucommented, May 22, 2017

@kisenka Thanks for all your help, svg-sprite-loader works for me now, the sprite file error was fixed by adding svgo-loader to beautify the svg raw code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

S Mode Get Button will not work and I can't get out of S MODE
Try running the Windows Store apps Troubleshooter at Settings > Update & Security > Troubleshoot. Try resetting the Store cache: http://www.
Read more >
Top 4 Ways to Fix Windows 10 Tablet Mode Not Working
Navigate to Settings > Updates & Security > Windows Update and download any available updates. If you noticed that the Windows 10 Tablet...
Read more >
Windows 10 Won't Boot? 12 Fixes to Get Your PC Running ...
1. Try Windows Safe Mode · Method 1: Enter Safe Mode From Windows Recovery · Method 2: Safe Mode with a Windows 10...
Read more >
How To Get Out of S Mode - Windows 10 Computer - YouTube
This video will show you how to get out of S Mode if you find yourself stuck there. Keep in mind, this is...
Read more >
[SOLVED] Windows Safe Mode Not Working? How to Fix It ...
Solution 1: Perform a System Restore · 1. You can see the drives on your computer are displayed on the software interface. ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found