svg-sprite-loader not working in nuxt.js application #185
Comments
|
I need the whole webpack config to be sure that is a loader bug |
|
Hi there see below:
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'nissanconfig',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: 'red' },
css: [
'~/assets/fonts/stylesheet.css',
{ src: '~/assets/main.scss', lang: 'scss' }
],
/*
** Build configuration
*/
build: {
plugins: [
new SpriteLoaderPlugin()
],
extend(config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
config.module.rules.push({ test: /\.svg$/, loader: 'svg-sprite-loader' })
}
}
}
…On Thu, 31 Aug 2017 at 13:21 Stas Kurilov ***@***.***> wrote:
I need the whole webpack config to be sure that is a loader bug
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#185 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AH3a1zuy7CRotEiFLcClPbDnvKmGipTQks5sdpdUgaJpZM4PH3_J>
.
|
|
That a nuxt.js config... |
|
@unwrittenmike You can extend the nuxt default webpack in the nuxt.config.js. Right now I have the same problem ;) |
|
@unwrittenmike I created an issue with Nuxt, to ask how this can be achieved. See my ticket for the implementation: |
|
@vanoorschot Thanks! Your hack works for me! ... sat for a a full day trying to get this working.. total legend! @kisenka Sorry for pointing the blame at your library... |
|
Is there a chance someone could show me a full implementation/solution to this? How the config looks and how the icon is imported into the components because I can't seem to get this working. Would be extremely grateful. |
|
@jesperlandberg I'll post a link to some code for you a bit later today. I have it running smoothly in 2 nuxt.js apps ;) |
|
@unwrittenmike would be awesome=) |
|
@jesperlandberg Happy to answer any questions you may have... |
|
@unwrittenmike awesome! Looks like the repo doesnt exist tho? |
|
@jesperlandberg try this, sorry new to sharing repos... not the hottest git guy haha... https://bitbucket.org/unwrittenmike/spriteloadertest |
|
@unwrittenmike thanks a lot! However, the icons doesn't seem to show up. Tested on my project and also cloning ur repo and running dev mode.
|
|
@jesperlandberg any chance you could make a gist or something? Both the BitBucket links were busted :( |
|
@unwrittenmike The link you provided doesn't work anymore. @jesperlandberg I agree with @krivaten. I would be glad if you could make a gist 😉 |
|
@unwrittenmike @jesperlandberg @krivaten I managed to deal with SVG sprite with the following configuration. I hope it will help you 😉 https://gist.github.com/ChucKN0risK/2d0f8466e13d4b63f3982ed2b60bd111 |
|
I actually wrote a Nuxt module that does it. Maybe it's still of interest: |
Do you want to request a feature, report a bug or ask a question?
Report a bug
What is the current behavior?
Compiled with 1 warnings
warning in ./assets/icons/big-loader.svg
svg-sprite-loader exception. 2 rules applies to
What is the expected behavior?
No warnings and sprite to load
If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
config.module.rules.push({ test: /\.svg$/, loader: 'svg-sprite-loader' })import test from '~/assets/icons/big-loader.svg'Please tell us a
bout your environment:
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
The text was updated successfully, but these errors were encountered: