Question

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

Answer 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' : ''
  },
);

Next.js assetPrefix减少了加载程序的工作量

1 个答案: