Next.js assetPrefix breaks less loader - reactjs

Question

I'm new to Next.js. Any help will be appreciated.
The app works fine in local dev environment. However, as soon as I add the following to next.config.js, next.js thorw an error.
// next.config.js
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/example',
}
#### error message
error - ./styles/fonts.less 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #font-face {
Not sure what the issue is. Any help is welcomed. The following is all the config I have with my app.
const withImages = require('next-images')
module.exports = withImages();
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
const withLess = require('#zeit/next-less')
/* With CSS Modules */
module.exports = withLess({
cssModules: true,
cssLoaderOptions: {
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]',
localsConvention: 'camelCase',
camelCase: 'dashes',
}
})
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/example',
}

Answer 1

I found out the root cause of the my problem. Multiple module.exports caused the issue since the last one will override all previous ones. It means there will be no loader to deal Less/CSS. I also decided to use next-compose-plugins plugin to help me deal with multiple plugins. Otherwise, I have to do something like withCSS(withLESS()).
const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');
const withCSS = require('#zeit/next-css');
const withLess = require('#zeit/next-less');
const isProd = process.env.NODE_ENV === 'production';
module.exports = withPlugins(
[
[withLess, {
cssModules: true,
cssLoaderOptions: {
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]',
localsConvention: 'camelCase',
camelCase: 'dashes',
}
}],
[withCSS],
[withImages],
],
{
/* global config here ... */
assetPrefix: isProd ? 'https://cdn.cloudfront.net/vpassets' : ''
},
);