Using with Vue-CLI 4 produces no results
See original GitHub issueBeen using this plugin for a while now on a few sites and it’s always worked great. Up to now I’ve been using it in conjunction with Laravel Mix for webpack management. Recently we did a refactor on a site in-progress to use Vue-CLI (4.2.2), and now there seems to be no output whatsoever. The svg sprite isn’t created and there are no errors to indicate what’s happening. Here’s the webpack config in vue.config.js
that’s always worked with Laravel Mix:
module.exports = {
configureWebpack: {
plugins: [
new SVGSpritemapPlugin("src/assets/images/svg/*.svg", {
output: {
filename: "../src/assets/fonts/icons.svg",
svg4everybody: false,
svgo: {
removeTitle: true,
removeStyleElement: true,
cleanupNumericValue: true
},
chunk: {
keep: true
}
},
sprite: {
prefix: false
}
})
]
}
};
As for versions:
- Vue: 2.6.11
- Vue-cli: 4.2.2
- svg-spritemap-webpack-plugin: 3.5.4
Again, things were working great until switching to Vue-cli. No matter what I do, no svg file is output, and there are no errors. Hoping someone might have some ideas. Thanks!
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
Same vue.config.js producing different results when running ...
It seems, I'm close to finding the cause of the problem. Some of the VUE files were using TS files located outside of...
Read more >No eslint warnings on initial "npm run serve" #3065 - GitHub
bin/vue-cli-service lint --no-fix always gives me the errors I see in the first run (I was hoping this builds up the cache and...
Read more >Deployment - Vue CLI
You can deploy the built content in the dist directory to any static file server, but make sure to set the correct publicPath....
Read more >Vue JS 3 Tutorial for Beginners #4 - The Vue CLI ... - YouTube
In this Vue 3 tutorial we'll use the Vue CLI to boilerplate a larger Vue project for us, which will ultimately contain multiple...
Read more >What's new in Vue CLI 5.0? - Ninja Squad
Choose the version you're currently using (4.5.12 for example), and the target version (5.0.1 for example), and it gives you a diff of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@cascornelissen Thanks so much for spending some time on it! You helped point me in the right direction 😄
I was able to get it to work by adding the following to my
vue.config.js
file under theconfigureWebpack
object:Vue is configured to watch the
public
folder, so this will fix the infinite loop issue. When you first runyarn serve
it loops like three times for some reason, but then it stops and starts to successfully work!Hopefully, this will help someone else. Thanks again!
@drewrawitz Hey sorry for my tardiness. No, we eventually realized that new svgs were getting added to the sprite only on “build”, so just kind of chalked it up to a minor inconvenience. After all, new icons aren’t added often. Just have to document what’s needed.
Based on the current suggestions, definitely going to try them out and see if it also works for us. Thanks to you and @cascornelissen !!