Reputation: 1485
I am deploying a Nextjs app to Zeit but as per the documentation it ask to add
module.exports = {
target: 'serverless'
}
as in next.config.js
but my file already contains a module.export
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
},
},
},
)
return config
}
},
)
How can I merge these exports in one. Please help me out!
I tried doing what one suggested in this issue https://github.com/zeit/next-plugins/issues/34 and https://github.com/zeit/next-plugins/issues/7
But there is no example with withCSS({})
Upvotes: 1
Views: 597
Reputation: 10997
use this lovely plugin https://github.com/JerryCauser/next-compose to combine
Eg :
const withTS = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const compose = require('next-compose')
const tsConfig = {/** ts config here */}
const sassConfig = {/** sass config here */}
module.exports = compose([
[withTS, tsConfig],
[withSass, sassConfig],
{
webpack: (config) => {
/**some special code */
return config
}
}
])
Upvotes: 3
Reputation: 12071
You should be able to combine them like this:
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
target: 'serverless',
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
},
},
},
)
return config
}
})
Upvotes: 3