Next.js 的assetPrefix 破坏了更少的加载器答案

【问题标题】：Next.js assetPrefix breaks less loaderNext.js 的assetPrefix 破坏了更少的加载器
【发布时间】：2020-07-09 22:43:35
【问题描述】：

我是 Next.js 的新手。任何帮助将不胜感激。

该应用在本地开发环境中运行良好。但是，只要我将以下内容添加到 next.config.js，next.js 就会出错。

// 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 {

不确定是什么问题。欢迎任何帮助。以下是我的应用程序的所有配置。

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',
}

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

我找到了问题的根本原因。多个module.exports 导致了这个问题，因为最后一个将覆盖所有以前的。这意味着将没有加载器来处理 Less/CSS。我还决定使用next-compose-plugins 插件来帮助我处理多个插件。否则，我必须执行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' : ''
  },
);

【讨论】：