I want to extend the webpack config with the svg-sprite-loader, which looks like: https://github.com/kisenka/svg-sprite-loader/blob/master/examples/browser-sprite/webpack.config.js
This conflicts with the url loader in Nuxt:
// https://nuxtjs.org/guide/assets/#webpacked
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
query: {
limit: 1000, // 1KO
name: 'img/[name].[hash:7].[ext]'
}
}
I get a svg-sprite-loader exception. 2 rules applies to warning and was able to fix it by removing the rule and re-add it with an exclude property:
extend(config, { dev, isClient }) {
/**
* Initialise SVG Sprites
*/
// get and remove file loader
const rule = config.module.rules.find(r => r.test.toString() === '/\\.(png|jpe?g|gif|svg)$/');
config.module.rules.splice(config.module.rules.indexOf(rule), 1);
// add it again, but now without 'assets\/svg'
config.module.rules.push({
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
exclude: /(assets\/svg)/,
query: {
limit: 1000, // 1KO
name: 'img/[name].[hash:7].[ext]',
},
});
config.module.rules.push({
test: /\.svg$/,
include: [
path.resolve(__dirname, 'assets/svg'),
],
use: 'svg-sprite-loader',
});
},
This feels like a dirty hack, but it was the only way to get it working. Could you add some support to be able to change the default nuxt webpack config or tell me how I could have done it otherwise?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This feature request is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1416">#c1416</a>)</em></sub></div>